jqueryを使ってすべてのチェックボックスをすべてオン/オフにします

Question

私がしたいことは、すべてを選択してすべてをチェックするマスターチェックボックスを作成することでした。私が作成したものよりもうまく機能しているこのjquery sniptが見つかりました。

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

私が持っている疑問は、このセクションでは、正確に何を言っているされています

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

私は、「これは」「.apply・シングル」であり、それはそれは、「チェックされているかどうかを確認されていることを理解"しかし、セクションの残りの部分は...英語で何を意味しますか？私はそれが意味することについて私の考えを持っていますが、私はむしろ誰かが私が推測するよりもむしろ何を知っているか聞いています。

ありがとうございました。ありがとうございます。

Answer 1

これは、という3進演算子と呼ばれています。一般的な形式は、ブール式がtrueに評価される場合は、式Aに評価され、式Bにブール式がfalseと評価された場合

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

あります。

Answer 2

これは、この行はこのように動作します三項演算子使用している

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

Answer 3

ためのショートフォームです：だから$(this).is(':checked'チェックボックス場合に応じて、trueまたはfalseを返しますあなたの状態である

<condition>?<consequent>:<alternative> 

をチェックされているかどうか。 trueの場合、 'checked'は属性になり、そうでなければ ''が属性になります。

Answer 4

thisは実際に.apply-single#checkboxSortコンテキストではありません。したがって、.apply-singleをすべて#checkboxSortというチェック属性に設定しています。

ternary operatorです。 の文と同様に、単純にインラインです。

Answer 5

私は、 "これは" ".applyシングル"

ハズレであることを理解しています。 thisは実際には#checkboxSort要素を指します。

?は、JavaScriptでconditional operatorです。

あなたは手段について尋ねているコード（擬似コード）の特定のビット：

idを持つ要素の変化を聞く：要するに

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

は、全体のコードスニペットは、これはありませんcheckboxSort。
イベントが発生すると、クラスapply-singleのすべての要素のcheckedの状態を、要素の新しいchecked状態に設定します。

---

恥知らずな自己宣伝：私はうまくこれを処理するおしっこ少しjQueryプラグインを作りました。 Check it out。

Answer 6

英語では、この項目がチェックされている場合、CSSクラスが「apply-single」のすべてのHTML要素の「checked」属性を「checked」に設定します。ifそうでない場合は、空の値に設定します。

実際の結果がchecked = ""の属性にならないことを確認してください。

チェックボックスの場合、チェックされていない状態はchecked = ""ではなく、checked属性がまったくないことで表現されます。

Answer 7

.live（）は推奨されていません。代わりに.on（）を使用してください。

このチェック：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); 
     } 
    });  
}); 

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