Check all uncheck all HTML checkboxes with Javascript

09 Feb

Posted by: admin

The following little piece of code shows how to check all / uncheck all HTML checkboxes with simple Javascript, without jQuery. It’s not something hard to do, but as I use it a lot, it’s nice to have it at one click…

<form name=”formname” method=”POST” action=”?action=dosomething”>
Check all: <input type=”checkbox” name=”checkall” id=”checkall” value=”Check All” onclick=”Check(‘formname’,$(‘.check_list’))”>
Option 1<input type=’checkbox’ class=”check_list” name=”check_list[]” value=”1″>
Option 2<input type=’checkbox’ class=”check_list” name=”check_list[]” value=”2″>
Option 3<input type=’checkbox’ class=”check_list” name=”check_list[]” value=”3″>
</form>

The corresponding Javascript code:

function Check(form_name,chk){ // alternate check all/check none of items
if(eval(“document.”+form_name+”.checkall.value”)==”Check All”){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
eval(“document.”+form_name+”.checkall.value=’UnCheck All’”);
} else{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
eval(“document.”+form_name+”.checkall.value=’Check All’”);
}
}