Check Boxes in HTML are part of forms. In doing research and learning new tricks with JavaScript, I came across a way to incorporate check boxes with a button to select all of your check boxes. First, let's recap the syntax of a check box, which belongs in the <body> tags:
- <form name="form1" action="">
- <input type="checkbox" name="cb1">ISP 361
- </form>
Once you have your check boxes made, creating this button in JavaScript is fairly easy. Following your check boxes and within the <form> tag, you have to create a button. The button also belongs within the <body> tags. The syntax for a button looks as follows:
- <form name="form1" action="">
- <input type="button" name="button1" value="Check All">
- </form>
Now, let's add the check boxes and the button to the <body> of an HTML document with the event onclick. The onclick event will allow us to automatically check all the check boxes with a click of the button. The syntax for this is:
- <form name="form1" action="">
- <input type="checkbox" name="cb1" value="ISP 100"> ISP 100
- <input type="checkbox" name="cb2" value="ISP 301"> ISP 301
- <input type="checkbox" name="cb3" value="ISP 361"> ISP 361
- <input type="checkbox" name="cb4" value="ISP 499"> ISP 499
- <input type="checkbox" name="cb5" value="ISP 523N"> ISP 523N
- <input type="checkbox" name="cb6" value="ISP 523S"> ISP 523S
- <input type="checkbox" name="cb7" value="ISP 523W"> ISP 523W
- <input type="button" name="button1" value="Check All"
- onclick="document.form1.cb1.checked=true;document.form1.cb2.checked=true;
- document.form1.cb3.checked=true;document.form1.cb4.checked=true;document.
- form1.cb5.checked=true;document.form1.cb6.checked=true;document.form1.cb7.checked=true;">
- </form>
To see this code run, check out the following:
What ISP classes have you taken and passed?
(Toot 193)
This is just one example of how you can incorporate check boxes with buttons. Also, you could have a button to "Uncheck All" by setting your check box value in the button tag to checked=false.