check all/checkbox alle Kontrollkästchen mit jquery

Question

Also, was ich tun wollte, war ein Master-Kontrollkästchen, die alle markieren und deaktivieren Sie alle auch. Ich habe dieses Jquery-Snip gefunden, das besser funktioniert als das, was ich erstellt habe.

$("#checkboxSort").live('change', function() { 
    $(".apply-single").attr('checked', $(this).is(':checked') ? 'checked' : ''); 
}); 

Die Frage, die ich habe, ist, was genau dieser Abschnitt ist zu sagen:

$(this).is(':checked') ? 'checked' : '' 

Ich verstehe, dass „dies“ ist die „.apply-Single“ und dass sie überprüfen, ob es „aktiviert ist "Aber was bedeutet der Rest der Sektion ... auf Englisch? Ich habe meine Gedanken darüber, was es bedeutet, aber ich höre viel lieber, was jemand weiß, als ich denke.

Danke für wen auch immer helfen kann.

Answer 1

Das nennt man einen ternären Operator. Das allgemeine Format ist

[boolean expression] ? [expression A] : [expression B] 

Es Expressions A bewertet, wenn der Boolesche Ausdruck true auswertet und B zum Ausdruck, wenn der Boolesche Ausdruck ergibt false.

Answer 2

Dies ist eine Kurzform für

if($(".apply-single").is(':checked')) { 
    $(".apply-single").attr("checked", "checked"); 
} else { 
    $(".apply-single").attr("checked", ""); 
} 

Answer 3

Diese Linie einen ternären Operator verwendet, die wie folgt funktioniert:

<condition>?<consequent>:<alternative> 

So $(this).is(':checked' ist Ihre Bedingung, die wahr oder falsch zurückgibt, je nachdem ob das Kontrollkästchen ist überprüft oder nicht. Wenn wahr, dann wird das "Überprüfte" zum Attribut, andernfalls wird das Attribut zum Attribut.

Answer 4

this ist eigentlich der #checkboxSort Kontext nicht die .apply-single. Also setzt man alle .apply-single auf das geprüfte Attribut #checkboxSort.

Es ist ein ternary operator. Ähnlich wie eine if Anweisung, einfach inline.

Answer 5

Ich verstehe, dass "dies" ist die ".apply-Single"

Nope. this bezieht sich eigentlich auf das #checkboxSort Element.

? ist die conditional operator in JavaScript.

Die besondere Bit-Code, den Sie über Mittel sind gefragt (Pseudo-Code):

if the element with ID "checkboxSort" is checked: 
    check all elements with class "apply-single" 
else: 
    uncheck all elements with class "apply-single" 

Kurz gesagt, der gesamte Code-Snippet tut dies:

mit der ID für Änderungen an dem Element Hören checkboxSort.
Wenn ein solches Ereignis ausgelöst wird, setzen Sie den checked-Status aller Elemente mit der Klasse apply-single auf den neuen checked-Status des Elements #checkboxSort.

---

Shameless Eigenwerbung: Ich habe ein klein wenig jQuery-Plugin diese gut zu handhaben. Check it out.

Answer 6

In Englisch, sagt der Code nach dem Sie fragen, wenn dieses Element markiert ist, dann setzen Sie das "checked" Attribut aller HTML Elemente mit einer CSS Klasse von "apply-single" auf "checked" - if nicht, dann setze es auf einen leeren Wert.

Bitte bestätigen Sie jedoch, dass das tatsächliche Ergebnis nicht zu Attributen führt, bei denen checked = "" ist.

Bei Kontrollkästchen wird der deaktivierte Status nicht durch checked = "" ausgedrückt, sondern wird ausgedrückt, wenn kein überprüftes Attribut vorhanden ist.

Answer 7

.live() ist veraltet. Verwenden Sie stattdessen .on(). diese

Check: http://jsfiddle.net/loginet/Rdc5r/

$(document).ready(function() { 

    $("#checkboxSort").on('click', function() { 
     $(".apply-single").prop("checked", $("#checkboxSort").prop("checked")); 
    }); 

    $('.apply-single').on('click', function() { 
     var total = $('input:not(#checkboxSort)').length; 
     var checked = $('input:not(#checkboxSort):checked').length;   
     if (total == checked) { 
      $('#checkboxSort').prop('checked', true); 
     } else if (total > checked || checked == 0) { 
      $('#checkboxSort').prop('checked', false); 
     } 
    });  
}); 

und die HTML:

<p> 
    <input type="checkbox" id="checkboxSort" />Check/Uncheck All</p> 
<hr/> 
<p id="p"> 
    <input type="checkbox" class="apply-single" />Checkbox 1 
    <input type="checkbox" class="apply-single" />Checkbox 2 
    <input type="checkbox" class="apply-single" />Checkbox 3 
</p>