Check/Uncheck Group of CheckBoxes

Javascript Code

<!DOCTYPE html>
<html>
<head>
<title>Check and Uncheck ALL check Boxes</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<script type=”text/javascript”>
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.forms[formname].getElementsByTagName(‘input’);

for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === ‘checkbox’) {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
</head>
<body>
<form name=”myform”>
<li>
<label >
<a href=”javascript:void();” onclick=”javascript:checkAll(‘myform’, true);”>Check All</a> |
<a href=”javascript:void();” onclick=”javascript:checkAll(‘myform’, false);”>UnCheck All</a>
</label>
</li>
<li>
<input type=”checkbox” name=”content1″ value=”1″>
</li>
<li>
<input type=”checkbox” name=”content2″ value=”2″>
</li>
<li>
<input type=”checkbox” name=”content3″ value=”3″>
</li>
</form>
</body>
</html>

JQuery Code

<!DOCTYPE html>
<html>
<head>
<title>Check and Uncheck ALL check Boxes</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script src=”jquery-1.11.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#checkall”).click(function () {
$(‘input:checkbox’).not(this).prop(‘checked’, this.checked);
});

});
</script>
</head>
<body>
<form name=”myform”>
<li>

<input type=”checkbox” id=”checkall” name=”checkall”>
<label >check/uncheck</label>
</li>
<li>
<input type=”checkbox” name=”content1″ value=”1″/>
</li>
<li>
<input type=”checkbox” name=”content2″ value=”2″/>
</li>
<li>
<input type=”checkbox” name=”content3″ value=”3″/>
</li>
</form>
</body>
</html>

Advertisements