Menu
I have a checkbox in my page. When I check it, other check boxes should be checked. And when I uncheck it, all the other check boxes should be unchecked too. How can I do this using jQuery? Or is simple HTML is enough?FIDDLE
<div>Select All<input type="checkbox" checked="true"></div>
1.<input type="checkbox">
2.<input type="checkbox">
3.<input type="checkbox">
4.<input type="checkbox">
5.<input type="checkbox">
697
In order to select all the checkboxes of a page, we need to create a selectAll () function through which we can select all the checkboxes together. In this section, not only we will learn to select all checkboxes, but we will also create another function that will deselect all the checked checkboxes.
Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.
If you need to select one checkbox at a time in multiple checkbox, i mean you want to allow anly one checkbox user can check then you can do easily using jquery. jquery prop() through you can give attribute value checked equel to true or false.
Add checked = "checked" to the input you want selected. For XHTML the recommended way is as described. Check HTML manual and W3C to confirm. The markup posted isn't XHTML, so it's logical to use just the simple keyword attribute checked .
Usig jQuery you can do like this
HTML:
<input id='selectall' type="checkbox" checked="true">
JS:
$('#selectall').change(function () {
if ($(this).prop('checked')) {
$('input').prop('checked', true);
} else {
$('input').prop('checked', false);
}
});
$('#selectall').trigger('change');
Check this in fiddle
78
you can try this:
<html>
<head>
<script type="text/javascript">
function toggleGroup(id) {
var group = document.getElementById(id);
var inputs = group.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = (inputs[i].checked) ? false : true;
}
}
window.onload = function() {
document.getElementById("checkmain").onchange = function() {
toggleGroup("check_grp");
}
}
</script>
</head>
<body>
<form name="form1" >
<input type="checkbox" name="checkmain" id="checkmain" /><br />
<p id="check_grp">
<input type="checkbox" /><label for="check1">check 1</label>
<input type="checkbox" /><label for="check2">check 2</label>
<input type="checkbox" /><label for="check3">check 3</label>
<input type="checkbox" /><label for="check4">check 4</label>
<input type="checkbox" /><label for="check5">check 5</label>
</p>
</form>
</body>
</html>
Try this,
<div>Select All<input type="checkbox" id="parent" /></div>
1.<input type="checkbox" class="child">
2.<input type="checkbox" class="child">
3.<input type="checkbox" class="child">
4.<input type="checkbox" class="child">
5.<input type="checkbox" class="child">
<script>
$(function(){
$('#parent').on('change',function(){
$('.child').prop('checked',$(this).prop('checked'));
});
$('.child').on('change',function(){
$('#parent').prop('checked',$('.child:checked').length ? true: false);
});
});
</script>
Fiddle
You can achieve it like,
$(function() {
$('#parent').on('change', function() {
$('.child').prop('checked', this.checked);
});
$('.child').on('change', function() {
$('#parent').prop('checked', $('.child:checked').length===$('.child').length);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Select All<input type="checkbox" id="parent" /></div>
1.<input type="checkbox" class="child"> 2.
<input type="checkbox" class="child"> 3.
<input type="checkbox" class="child"> 4.
<input type="checkbox" class="child"> 5.
<input type="checkbox" class="child">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
