My solution of checking/unchecking a group of HTML checkboxes using Javascript implies using an array of checkboxes, which means naming all the inputs of type ‘checkbox’ like array_name[]. Example:
<form name="cb_form"> <input type="checkbox" name="cb[]" value="0" />Zero <input type="checkbox" name="cb[]" value="1" />One <input type="checkbox" name="cb[]" value="2" />Two <input type="checkbox" name="cb[]" value="3" />Three </form>
In this example, the name of the checkboxes array is cb.
Next, we place two links for checking/unchecking all checkboxes in our array. If someone clicks one of these links, the checkAll() JavaScript function is called:
<a href="" onclick="checkAll('cb_form', 'cb[]', true); return false;">Check all<a>
<a href="" onclick="checkAll('cb_form', 'cb[]', false); return false;">Uncheck all<a>
The checking/unchecking all checkboxes function in JavaScipt looks like this:
function checkAll(form_name, cb_name, value)
{
var cb_arr = document.forms[form_name].elements[cb_name];
// if the checkboxes exist
if(cb_arr)
{
// if the number of checkboxes is at least 2
if(cb_arr.length > 1)
{
// for each checkbox
for(i = 0; i < cb_arr.length; i++)
{
// check (value == true) or uncheck (value == false) it
cb_arr[i].checked = value;
}
}
else // cb_arr.length is undefined which means there is a single checkbox element that is not considered an array of one element
{
cb_arr.checked = value;
}
}
}
Note that if we only have one checkbox, the variable cb it is not considered an array, but a normal variable. This is useful in the situation of dinamically generated HTML pages (using PHP, for example) and the number of checkboxes varies from page to page.
You can test the example here: