Why in my js code can just with one click on name:check_all checking all checkboxes?

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: /

My jQuery version is 1.9.

How can fix it?

Why in my js code can just with one click on name:check_all checking all checkboxes?

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 can fix it?

• javascript
• jquery
• checkbox

4 Answers 4

Use prop method. When your markup is rendered attributes become properties of the elements, using JavaScript you should modify properties of the element.

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

http://jsfiddle.net/GW64e/

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

Use .prop, not .attr, to change properties of elements. .attr is for HTML attributes.

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

fix is as follow:-

$(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;
        });
    }
});

A complete solution select || deselect checkbox jQuery :

$(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 :

Single check box on checked three checkbox will be select and deselect.

<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 to someone as it did for me.