проверка всех флажков jquery

Question

Почему в моем js-коде можно только одним щелчком по name:check_all проверить все флажки?

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/

Мой JQuery версия 1.9.

Как это исправить?

Answer 1

Используйте prop метод. Когда ваша разметка визуализируется, атрибуты становятся свойствами элементов, используя JavaScript, вы должны изменять свойства элемента.

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

http://jsfiddle.net/GW64e/

Обратите внимание, что если input[name="check_all"] не генерируется динамически нет необходимости передавать событие.

Answer 2

Используйте .prop, а не .attr, чтобы изменить свойства элементов. .attr предназначен для атрибутов HTML.

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

Answer 3

исправление выглядит следующим образом: -

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

Answer 4

Комплексное решение выбрать || снимите флажок 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 должно быть:

один флажок на проверяемых три флажка будет выбрать и отменить выбор.

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

Надеюсь, это поможет кому-то, как это было для меня.