jQuery Änderung Aktion von einer anderen Änderung Aktion

Question

ich den nächsten Code haben:

js:

$('[id^="check-"]').change(function(){ 
     var new_id = this.id.replace(/check/, 'new'), 
      real_id = this.id.replace(/check/, 'real'); 
     if ($(this).is(':checked')) { 
      $('#'+real_id).val($('#'+new_id).text()); 
     } else { 
      $('#'+real_id).val(0); 
     } 
    }); 

html:

<tr> 
    <td><span id="new-1">2</span></td> 
    <td><input type="text" name="real-1" id="real-1" value="0"></td> 
    <td><input type="checkbox" class="card" id="check-1"></td> 
</tr> 
<tr> 
    <td><span id="new-2">7</span></td> 
    <td><input type="text" name="real-2" id="real-2" value="0"></td> 
    <td><input type="checkbox" class="card" id="check-2"></td> 
</tr> 
<tr> 
    <td><span id="new-3">4</span></td> 
    <td><input type="text" name="real-3" id="real-3" value="0"></td> 
    <td><input type="checkbox" class="card" id="check-3"></td> 
</tr> 

Die Grundidee: den Text aus new-* nehmen und setzen in real-* Posteingang, wenn Sie auf verwandte check-* Kontrollkästchen klicken.

Jetzt möchte ich ein weiteres Kontrollkästchen hinzufügen, dass Masse diese Operation für alle Elemente ausführt. Ich versuchte es:

$('#main-checkbox').change(function(){ 
     if ($(this).is(':checked')) { 
      $('.card').attr('checked', true); 
     } else { 
      $('.card').attr('checked', false); 
     } 

    }); 

Aber es funktioniert nicht. Warum? Wie kann ich die change Aktion für all diese Checkouts starten.

Danke.

Answer 1

Das Ändern von Feldwerten (einschließlich geprüftem Status) über JavaScript löst keine Änderungsereignisse aus, aber Sie können die Methode .change() explizit aufrufen. Ihre Funktion kann auch vereinfacht werden - die Sie nicht wirklich brauchen die if/else Struktur:

$('#main-checkbox').change(function(){ 
    $('.card').attr('checked', this.checked).change(); 
}); 

Demo: http://jsfiddle.net/4qs4d/

Beachten Sie, dass $(this).is(':checked') ist nur ein langsamer Weg this.checked zu sagen. Wenn Sie jQuery 1.6 oder höher verwenden, sollten Sie auch .prop() method statt .attr() verwenden.