I have a checkbox select all issue. I have multiple checkbox that can be triggered by a master one.
If the master one is check then you can select any checkbox (which this works). Now my problem is when i check "none" all of them are gone even the master
What I need is not to unchecked the master. I can have as many as checkbox as I want.
Is there a solution to do this without putting an ID on each or automatically uncheck all checkbox and not the master one?
here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkAll').click(function() {
if(!$('#master').is(':checked')) { return;
} $('input[type="checkbox"]').attr('checked', true);
});
$('#checkNone').click(function() {
$('input[type="checkbox"]').attr('checked', false); });
$('#master').click(function() { if($('#master').is(':checked')) {
return; } $('input[type="checkbox"]').attr('checked', false);
});
$('input[type="checkbox"]').click(function() {
if(!$('#master').is(':checked')) { $(this).attr('checked', false);
}
});
});
</script>
</head>
<input type="checkbox" value="master" id="master">master
<span id="checkAll">All</span>
<span id="checkNone">None</span>
<input type="checkbox" value="1" id="c1">1
<input type="checkbox" value="2" id="c2">2
<input type="checkbox" value="3" id="c3">3
<input type="checkbox" value="4" id="c4">4
<input type="checkbox" value="5" id="c5">5
Abstract: To Select or Deselect Checkboxes using jQuery, all you need to do is use the prop() method along with the change event to achieve the requirement in a couple of lines of code. Gmail has a nice option where you can select and deselect multiple checkboxes (Emails) using the 'Select All' checkbox.
By using jQuery function prop() you can dynamically add this attribute or if present we can change its value i.e. checked=true to make the checkbox checked and checked=false to mark the checkbox unchecked.
To check whether a Checkbox has been checked, in jQuery, you can simply select the element, get its underlying object, instead of the jQuery object ( [0] ) and use the built-in checked property: let isChecked = $('#takenBefore')[0]. checked console. log(isChecked);
Select change event This one is only for changing the checkbox state based on option selection. Check total options and total selected options if it is equal then set Select All checkbox checked otherwise unchecked it.
Based on your code, I would add a wrapper around the check-box you want to select all/none and then give the wrapper id and inputs to select all or none.
$('#list input[type="checkbox"]').attr('checked', false);
or for jQuery 1.6+
$('#list input[type="checkbox"]').prop('checked', false);
This way, you can control all your checkboxes without affecting the "master" one.
Here's the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkAll').click(function() {
if(!$('#master').is(':checked')) {
return;
}
$('#list input[type="checkbox"]').attr('checked', true);
});
$('#checkNone').click(function() {
$('#list input[type="checkbox"]').attr('checked', false);
});
$('#master').click(function() {
if($('#master').is(':checked')) {
return;
}
$('#list input[type="checkbox"]').attr('checked', false);
});
$('#list input[type="checkbox"]').click(function() {
if(!$('#master').is(':checked')) {
$(this).attr('checked', false);
}
});
});
</script>
</head>
<input type="checkbox" value="master" id="master">master
<span id="checkAll">All</span>
<span id="checkNone">None</span>
<div id="list">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
</div>
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