<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Multiple Checkbox Select/Deselect - DEMO</title>
</head>
<body>
Multiple Checkbox Select/Deselect - DEMO
| <input type="button" id="CheckedAll" value="Check All" /> | <input type="button" id="UncheckedAll" value="Uncheck All" /> |
| <input id="selectall" type="checkbox"> | Cell phone | Rating |
| <input class="case" name="case" value="1" type="checkbox"> | BlackBerry Bold 9650 | 2/5 |
| <input class="case" name="case" value="2" type="checkbox"> | Samsung Galaxy | 3.5/5 |
| <input class="case" name="case" value="3" type="checkbox"> | Droid X | 4.5/5 |
| <input class="case" name="case" value="4" type="checkbox"> | HTC Desire | 3/5 |
| <input class="case" name="case" value="5" type="checkbox"> | Apple iPhone 4 | 5/5 |
| <input type="button" id="submit" value="Remove" /> | |
</body>
</html>
<script language="javascript">
$(function () {
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
$(".case").click(function () {
if ($(".case").length == $(".case:checked").length)
{
$("#selectall").attr("checked", "checked");
}
else {
$("#selectall").removeAttr("checked");
}
});
$('#CheckedAll').click(function () {
$('#selectall').attr('checked', true);
$('.case').attr('checked', true);
})
$('#UncheckedAll').click(function () {
$('#selectall').attr('checked', false);
$('.case').attr('checked', false);
})
$('#submit').click(function () {
if ($('.case:checked').length) {
var chkId = '';
$('.case:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
alert(chkId);
}
else {
alert('Nothing Selected');
}
});
});</script>
Submit an article or tip