Geek Answers Handbook

Check all jquery checkboxes

Why in my js-code you can just check all the checkboxes with one click of the name:check_all button?

HTML:

 <div id="ss"> <input type="checkbox" name="check_all"> </div> <input type="checkbox" name="checked" class="idRow"> <input type="checkbox" name="checked" class="idRow"> <input type="checkbox" name="checked" class="idRow"> <input type="checkbox" name="checked" class="idRow"> <input type="checkbox" name="checked" class="idRow"> <input type="checkbox" name="checked" class="idRow"> <input type="checkbox" name="checked" class="idRow"> <input type="checkbox" name="checked" class="idRow">

JQuery

 $(document).on('click change','input[name="check_all"]',function() { var checkboxes = $('.idRow'); if($(this).is(':checked')) { checkboxes.attr("checked" , true); } else { checkboxes.attr ( "checked" , false ); } });

DEMO: http://jsfiddle.net/KdaZr/

My jQuery version is 1.9.

How to fix it?

+6
source share
4 answers

Use the prop method. When your markup is visualized, attributes become properties of elements, using JavaScript, you must change the properties of the element.

 $(document).on('change','input[name="check_all"]',function() { $('.idRow').prop("checked" , this.checked); });

http://jsfiddle.net/GW64e/

Please note that if input[name="check_all"] not generated dynamically, there is no need to delegate the event.

+13
source

Use .prop rather than .attr to change the properties of elements. .attr for HTML attributes.

http://jsfiddle.net/KdaZr/1/

+2
source

The following is fixed: -

 $(document).on('click change','input[name="check_all"]',function() { var checkboxes = $('.idRow'); if($(this).is(':checked')) { checkboxes.each(function(){ this.checked = true; }); } else { checkboxes.each(function(){ this.checked = false; }); } });
0
source

Complete solution select || uncheck jQuery checkbox:

 $(document).ready(function() { $("#checkedAll").change(function(){ if(this.checked){ $(".checkSingle").each(function(){ this.checked=true; }) }else{ $(".checkSingle").each(function(){ this.checked=false; }) } }); $(".checkSingle").click(function () { if ($(this).is(":checked")){ var isAllChecked = 0; $(".checkSingle").each(function(){ if(!this.checked) isAllChecked = 1; }) if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); } } else { $("#checkedAll").prop("checked", false); } }); });

Html should be:

A separate checkbox of the three checkboxes selected will be selected and canceled.

 <input type="checkbox" name="checkedAll" id="checkedAll"></input> <input type="checkbox" name="checkAll" class="checkSingle"></input> <input type="checkbox" name="checkAll" class="checkSingle"></input> <input type="checkbox" name="checkAll" class="checkSingle"></input>

Hope this helps someone as it was for me.

-1
source

More articles:


All Articles