Bright Java Tutorial

is brought to you by DoITBright LLC

Javascript

Check And Uncheck HTML Checkbox Using Javascript

Sooner or later, we will find ourselves facing the need to check or / and uncheck an HTML checkbox programmatically using Javascript. A very common example that we always see is the check all and uncheck all checkboxes. Let us look at the code shown below.

  <html>
    <head>
      <title>
        Check And Uncheck HTML Checkbox Using Javascript
      </title>
      <script type="text/javascript">
        function checkAll() {
          for(var i=1; i<=3;i++) {
            var id = 'chk' + i;
            document.getElementById(id).checked = true;
          }
        }
        function uncheckAll() {
          for(var i=1; i<=3;i++) {
            var id = 'chk' + i;
            document.getElementById(id).checked = false;
          }
        }
      </script>
    </head>
    <body>
      <form>
        <input type="checkbox" id="chk1" name="chk1" 
          value="val1" />Value 1<br/>
        <input type="checkbox" id="chk2" name="chk2" 
          value="val2" />Value 2<br/>
        <input type="checkbox" id="chk3" name="chk3" 
          value="val3" />Value 3<br/>
        <input type="button" value="Check All" 
          onclick="checkAll();" />
        <input type="button" value="Uncheck All" 
          onclick="uncheckAll();" />
      </form>
    </body>
  </html>
                           
The example above will show 3 checkboxes when viewed on your browser. The 3 checkboxes are named as 'chk1', 'chk2' and 'chk3' respectively. There will be a button that invokes the 'checkAll' Javascript function. As you may have seen, the above mentioned function will simply loop 3 times. A counter variable is used to be concatenated at the end of a string with an initial value of 'chk'. For every loop, the value of the variable 'id' will be set to 'chk1', 'chk2' and 'chk3' respectively. Each is used to refer to the HTML checkbox programmatically and eventually set each refered checkbox to 'checked' by setting the 'checked' attribute to 'true'. Similarly, there is a button that invokes the 'uncheckAll' Javascript function that performs similar logic however, instead of checking all the checkboxes, it unchecks all the checkboxes.

Let us look at another example. This example will uncheck a second checkbox when the first checkbox is checked. Similarly, check the second checkbox when the first checkbox is unchecked.

  <html>
    <head>
      <title>
        Javascript Validate HTML TextField
      </title>
      <script type="text/javascript">
        function toggleChk() {
          var chk = document.getElementById('chk');
          var revchk = document.getElementById('revchk');
          if(chk.checked) {
            revchk.checked = false;
          } else {
            revchk.checked = true;
          }
        }
      </script>
    </head>
    <body>
      <form>
        <input type="checkbox" id="chk" name="chk" 
          value="val" onchange="toggleChk()"/>Value
          <br/>
        <input type="checkbox" id="revchk" name="revchk" 
          value="val" />Reverse Value<br/>
      </form>
    </body>
  </html>
                           
The above example demostrates how to use the Javascript 'onchange' event listener that can be used in checkboxes.

In this tutorial, we have seen how to use Javascript in checking and unchecking an HTML checkbox.


Back    Next