HTML DOM Input Checkbox defaultChecked Property

HTMLWeb DevelopmentFront End Technology

<p>The HTML DOM input checkbox defaultChecked property returns the default value of checked attribute of a checkbox in HTML.</p><h2>Syntax</h2><p>Following is the syntax &minus;</p><pre class="result notranslate">object.defaultChecked</pre><h2>Example</h2><p>Let us see an example of defaultChecked property &minus;</p><p><a class="demo" href="http://tpcg.io/d5wILl" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML DOM checked property&lt;/title&gt; &lt;style&gt; &nbsp; &nbsp;body{ &nbsp; &nbsp; &nbsp; text-align:center; &nbsp; &nbsp;} &nbsp; &nbsp;p{ &nbsp; &nbsp; &nbsp; font-size:1.5rem; &nbsp; &nbsp; &nbsp; color:#ff8741; &nbsp; &nbsp;} &nbsp; &nbsp;input{ &nbsp; &nbsp; &nbsp; width:30px; &nbsp; &nbsp; &nbsp; height:30px; &nbsp; &nbsp;} &nbsp; &nbsp;button{ &nbsp; &nbsp; &nbsp; background-color:#db133a; &nbsp; &nbsp; &nbsp; color:#fff; &nbsp; &nbsp; &nbsp; padding:8px; &nbsp; &nbsp; &nbsp; border:none; &nbsp; &nbsp; &nbsp; width:180px; &nbsp; &nbsp; &nbsp; margin:0.5rem; &nbsp; &nbsp; &nbsp; border-radius:50px; &nbsp; &nbsp; &nbsp; outline:none; &nbsp; &nbsp; &nbsp; font-weight:bold; &nbsp; &nbsp;} &nbsp; &nbsp;.show-msg{ &nbsp; &nbsp; &nbsp; color:#db133a; &nbsp; &nbsp; &nbsp; font-size:1.5rem; &nbsp; &nbsp; &nbsp; font-weight:bold; &nbsp; &nbsp;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;checked Property Example&lt;/h1&gt; &lt;p&gt;Are you smart?&lt;/p&gt; &lt;input type=&quot;checkbox&quot; checked&gt; &lt;br&gt; &lt;button onclick=&quot;check()&quot;&gt;Lets Check? Click me&lt;/button&gt; &lt;div class=&quot;show-msg&quot;&gt;&lt;/div&gt; &lt;script&gt; &nbsp; &nbsp;function check() { &nbsp; &nbsp; &nbsp; var input = document.querySelector(&quot;input&quot;); &nbsp; &nbsp; &nbsp; var showMsg = document.querySelector(&quot;.show-msg&quot;); &nbsp; &nbsp; &nbsp; if(input.defaultChecked === true){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;showMsg.innerHTML=&quot;You are right!You are smart by default&quot;; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;showMsg.innerHTML=&quot;Hmmmmm!You are not smart by default&quot;; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp;} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This will produce the following output &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25349/checked_property_ex.jpg" class="fr-fic fr-dib" style="width:600px; height:419px;" width="600" height="419"></p><p>Click on &ldquo;<strong>Lets Check? Click me</strong>&rdquo; button to check whether the checkbox is by default checked or not?</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25349/checked_property_ex1.jpg" class="fr-fic fr-dib" style="width:600px; height:419px;" width="600" height="419"></p>
raja
Updated on 30-Jul-2019 22:30:26

Advertisements