How to check and uncheck all checkboxes
Question
I have a problem with my code. I am trying to click on the button to check all of the checkboxes but nothing is working.
Here's my code.
<body>
<html>
<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<button type="button" name="btn_checkall" id="btn_checkall">Check all</button>
</html>
</body>
<script>
$(document).ready(function(){
$('#btn_checkall').click(function(){
if($(this).prop('checked')){
$('.chk_boxes1').prop('checked', true);
}else{
$('.chk_boxes1').prop('checked', false);
}
});
});
</script>
I don't know where the trouble is coming from, but I guess that something have to do with the id, name or whatever it is that make it stop working.
Can you please show me the correct code that I could use to check and uncheck all of the checkboxes when I click on a button using with my code?
3 answers
solution1
2 ACCPTED 2018-08-21 20:55:56
One thing to correct is that you have your html tag after your body tag. The html tag should for sure be the parent.
Other than this it looks like you have assigned "chk_boxes1" to id's instead of classes. If you change them to classes then things should work:
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1" value="<?php echo $rowTrackers['id']; ?>" />
<br>
Also you are checking at button to determine checked status. This also will make the code not work. You can add and remove a class to the button if you want to change status or you can do something like this to check the group of checkboxes:
$(document).ready(function(){
$('#btn_checkall').click(function(){
if ($('.chk_boxes1:checked').length == $('.chk_boxes1').length) {
$('.chk_boxes1').prop('checked', false);
}
else {
$('.chk_boxes1').prop('checked', true);
}
});
solution2
1 2018-08-21 21:05:23
You have a lot going wrong there.
Firstly, your HTML tags are in the wrong order. Your document should start with <html> and end with </html> :
So, change your document to be like this:
<html>
<body>
// your content
</body>
</html>
And you also want to include your script at the bottom of your <body> or, as you're listening for DOM ready event, include the script in the <head> . So, adjust your <script> position to here:
<html>
<body>
// your content
<script>
// script here
</script>
</body>
</html>
As for the main question, I suggest these changes:
HTML:
Remove the duplicate IDs. ID are meant to be totally unique for each element.
<input type="checkbox" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
jQuery:
Select the checkboxes by name instead of ID:
$(document).ready(function() {
$('#btn_checkall').click(function(){
var $chk_boxes = $('input[name="chk_boxes1"]');
if($chk_boxes.prop('checked')) {
$chk_boxes.prop('checked', true);
} else {
$chk_boxes.prop('checked', false);
}
});
});
solution3
0 2018-08-21 20:57:37
As people have said, ids should be unique:
$(document).ready(function(){
//Use JQuery .on to attach event handler
$('#btn_checkall').on('click', function(){
//Get all checkboxes by class
const $checkboxes = $('.delete_customer');
//Use .each to iterate the checkboxes
$checkboxes.each(function(){
$(this).prop('checked', true);
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.