2013-02-17 17 views
6

Warum in meinem Js-Code kann nur mit einem Klick auf name:check_all alle Checkboxen überprüft werden?Alle Checkboxen prüfen jquery

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/

Meine jQuery-Version ist 1.9.

Wie kann es reparieren?

Antwort

13

Verwendung prop Methode. Wenn Ihr Markup gerendert wird, werden Attribute zu Eigenschaften der Elemente, mit JavaScript sollten Sie die Eigenschaften des Elements ändern.

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

http://jsfiddle.net/GW64e/

Beachten Sie, dass, wenn input[name="check_all"] nicht dynamisch generiert es keine Notwendigkeit, um das Ereignis zu delegieren.

2

Verwenden Sie .prop, nicht .attr, um die Eigenschaften von Elementen zu ändern. .attr ist für HTML-Attribute.

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

0

fix ist wie folgt: -

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

Eine komplette Lösung wählen || Checkbox jQuery deaktivieren:

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

Einzelkontrollkästchen auf drei geprüft Checkbox wird wählen und abzuwählen.

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

Hoffen, dass dies jemand hilft, wie es für mich getan hat.

+0

Süßer Jesus, so viel Code, wenn alles, was Sie tun müssen, ist: https://jsfiddle.net/4e8h7q7b/ – NullUserException

Verwandte Themen