How to check all checkboxes in current form using jquery?

Question

Consider this simple code example:

<form name="text" id="frm1" method="post"> <input type="checkbox" name="name[]" value="1000"> Chk1<br> <input type="checkbox" name="name[]" value="1001"> Chk2<br> <input type="checkbox" name="name[]" value="1002"> Chk3<br> <input type="checkbox" name="name[]" value="1003"> Chk4<br> <input type="checkbox" id="select_all"/> Select All<br> </form> <form name="text" id="frm2" method="post"> <input type="checkbox" name="name[]" value="4000"> Chk1<br> <input type="checkbox" name="name[]" value="4001"> Chk2<br> <input type="checkbox" name="name[]" value="4002"> Chk3<br> <input type="checkbox" name="name[]" value="4003"> Chk4<br> <input type="checkbox" id="select_all"/> Select All<br> 

I am trying to get Select All to work in every form (forms are dynamically generated in my production code and have different, changing names)

I use this jquery, but select_all only works for the first form; it does not affect forms below the first.

 $('#select_all').change(function() { var checkboxes = $(this).closest('form').find(':checkbox'); if($(this).is(':checked')) { checkboxes.attr('checked', 'checked'); } else { checkboxes.removeAttr('checked'); } }); 

I can’t understand how to check the “Check all” checkboxes in any checkbox: the checkbox contained in the form identifier.

Can someone point me in the right direction?

Many thanks

Answer 1

You have multiple elements with the same identifier, which is invalid HTML and causes the problem you are seeing. Change id="select_all" to class="select_all" and $('#select_all') to $('.select_all') and you should be good.

Answer 2

You have two elements with id select_all ; what is not allowed. Change this to a class and try the following:

 $('.select_all').change(function() { var checkboxes = $(this).closest('form').find(':checkbox'); checkboxes.attr('checked', $(this).is(':checked')); }); 

Answer 3

Identifiers are unique. You have two. If you want to use multiple elements, use class="select_all" and $('.select_all')

Answer 4

 $('#select_all').click(function() { $("input:checkbox", $(this).closest('form')).attr("checked", this.checked) }); 

However, for this you only need one element with id select_all . If you can go to the select_all class, then just replace # with . and it will be convenient for you to go

Answer 5

Try the following:

 $("#select_all").click(function() { var checked_status = this.checked; $("input[@name=name]").each(function() { this.checked = checked_status; }); }); 

Answer 6

you cannot have two elements with the same identifier. example

HTML:

 <form name="text" id="frm1" method="post"> <input type="checkbox" name="name[]" value="1000"> Chk1<br> <input type="checkbox" name="name[]" value="1001"> Chk2<br> <input type="checkbox" name="name[]" value="1002"> Chk3<br> <input type="checkbox" name="name[]" value="1003"> Chk4<br> <input type="checkbox" id="select_all_1"/> Select All<br> </form> <form name="text" id="frm2" method="post"> <input type="checkbox" name="name[]" value="4000"> Chk1<br> <input type="checkbox" name="name[]" value="4001"> Chk2<br> <input type="checkbox" name="name[]" value="4002"> Chk3<br> <input type="checkbox" name="name[]" value="4003"> Chk4<br> <input type="checkbox" id="select_all_2"/> Select All<br> </form> 

JS:

 $(function() { $('#select_all_1, #select_all_2').bind('click', function(event) { var ref = this, refChecked = this.checked; $(this.form).find('input[type="checkbox"]').each(function(i, el) { if(this != ref) this.checked = refChecked; }); }); });