jquery - チェックボックスをカウントして値を表示する

Question

次のjqueryを使用して、選択したチェックボックスの数を表示しています

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
    var count = $("input[type=checkbox]:checked").size();
        $(this).val('uncheck all')
        $("#count").text(count+ " item(s) selected");
    },function(){
        $('input:checkbox').removeAttr('checked');
        var count = $("input[type=checkbox]:checked").size();
        $(this).val('check all');  
        $("#count").text(count+ " item(s) selected");
    })
})

ここにhtmlがあります

 <input type="button" class="check" value="check all" />
 <input type="checkbox" class="cb-element" /> Checkbox  1
 <input type="checkbox" class="cb-element" /> Checkbox  2
 <input type="checkbox" class="cb-element" /> Checkbox  3

 <p id="count"></p>

すべてをチェックすると、選択された3つのアイテムのように正しい番号が表示され、すべてのチェックを外すと、選択されたアイテムが表示されます。

しかし、選択したチェックボックスを個別に削除すると、カウントは表示されません。たとえば、1 つ削除しても、カウントは 2 ではなく 3 のままです。

どうすればこれを達成できますか?

score 1 · Accepted Answer

:checked 疑似クラスを試してください:

$("input[type=checkbox]").click(function () {
    $("#count").html($("input[type=checkbox]:checked").length);
});

score 1 · Accepted Answer

このコードを試して、APIで詳細を確認してください

var countChecked = function() {
   var n = $( "input:checked" ).length;
    $( "p" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
countChecked();
$( "input[type=checkbox]" ).on( "click", countChecked );

score 0 · Accepted Answer

$("input:checkbox:checked").length;

デモ

$("input:checkbox").change(function () {
    $('#count').text($("input:checkbox:checked").length);
});

score 0 · Accepted Answer

var count = 0;
$('input[type=checkbox]').each(function () {
      if (this.checked) {
          count++;
      }
});
alert(count);

score 0 · Accepted Answer

$( "input[type=checkbox]" ).click(function(){

      $('#count').html($( "input[type=checkbox]:checked" ).length);  
});

score 0 · Accepted Answer

これはあなたにカウントを与えています：

$('input:checkbox').on('change', function(){
    $('#count').html($('input:checkbox:checked').size());
});

jsフィドル

jquery - チェックボックスをカウントして値を表示する

6 に答える 6

Related

Reference