HTML DOM Input Checkbox value Property

HTMLWeb DevelopmentFront End Technology

<p>The Input Checkbox value property returns a string with the value attribute of input checkbox. User can also set it to a new string.</p><h2>Syntax</h2><p>Following is the syntax &minus;</p><ul class="list"><li>Returning string value</li></ul><pre class="result notranslate">inputCheckboxObject.value</pre><ul class="list"><li>Setting <strong>value&nbsp;</strong>attribute to a string value</li></ul><pre class="result notranslate">inputCheckboxObject.value = &lsquo;String&rsquo;</pre><h2>Example</h2><p>Let us see an example of <strong>Input Checkbox value</strong> property &minus;</p><p><a class="demo" href="http://tpcg.io/zkkXBS" 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;Value Attribute of Checkbox&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&quot;Form&quot;&gt; &lt;div&gt; Color-Red: &lt;input value=&quot;Green&quot; id=&quot;formCheckbox&quot; type=&quot;checkbox&quot; name=&quot;formCheckbox&quot;&gt; &lt;/div&gt; &lt;/form&gt; &lt;button onclick=&quot;changeType()&quot;&gt;Change value of input checkbox&lt;/button&gt; &lt;div id=&quot;displayDiv&quot;&gt;&lt;/div&gt; &lt;script&gt; &nbsp; &nbsp;var valueOfInput = document.getElementById(&quot;formCheckbox&quot;); &nbsp; &nbsp;var displayDiv = document.getElementById(&quot;displayDiv&quot;); &nbsp; &nbsp;displayDiv.textContent = &#39;Value: &#39; + valueOfInput.value; &nbsp; &nbsp;function changeType(){ &nbsp; &nbsp; &nbsp; if(valueOfInput.value == &#39;Green&#39; &amp;&amp; valueOfInput.checked == true){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;valueOfInput.value = &#39;Red&#39; displayDiv.textContent = &#39;value: &#39; + valueOfInput.value; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;displayDiv.textContent = &#39;Check the checkbox to change value to red&#39;; &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>Before clicking &lsquo;<strong>Change value of input checkbox</strong>&rsquo; button &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25441/change_value.jpg" class="fr-fic fr-dib" style="width:600px; height:127px;" width="600" height="127"></p><p>After clicking <strong>&lsquo;Change value of input checkbox</strong>&rsquo; button &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25441/after_change_value.jpg" class="fr-fic fr-dib" style="width:600px; height:129px;" width="600" height="129"></p><p>Checked &lsquo;<strong>Color-Red</strong>&rsquo; checkbox &amp; clicking &lsquo;<strong>Change value of input checkbox</strong>&rsquo; button &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25441/checked_change_value.jpg" class="fr-fic fr-dib" style="width:600px; height:132px;" width="600" height="132"></p>
raja
Updated on 30-Jul-2019 22:30:26

Advertisements