29

これが私のコードです:

チェックされたチェックボックスを実際にカウントし、内部に書き込みます<span class="counter"></span>。このコードは Firefox では機能しますが、Chrome では機能しません。

Chrome では、.select_all は必要なすべてのチェックボックスをチェックしますが、カウンターを更新しません。実際には、.select_all のチェックを外すとカウンターが更新されますが、これは奇妙です。

重要な事実: .counter 内の .Select_all チェックボックスをカウントしたくない

jQuery(document).ready(function($){

$(function() {
    $('#general i .counter').text(' ');

    var generallen = $("#general-content input[name='wpmm[]']:checked").length;
    if(generallen>0){$("#general i .counter").text('('+generallen+')');}else{$("#general i .counter").text(' ');}
})

$("#general-content input:checkbox").on("change", function() {
    var len = $("#general-content input[name='wpmm[]']:checked").length;
    if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');}
});


$(function() {
    $('.select_all').change(function() {
        var checkthis = $(this);
        var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");

        if(checkthis.is(':checked')) {
            checkboxes.attr('checked', true);
        } else {
            checkboxes.attr('checked', false);
        }
    });
});

});

編集: これはコードのサンプル ドキュメントです: http://jsfiddle.net/8PVDy/1/

4

7 に答える 7

64

関数を使用してカウンターを更新できます。

function updateCounter() {
    var len = $("#general-content input[name='wpmm[]']:checked").length;
    if(len > 0){
       $("#general i .counter").text('('+len+')');
    } else { 
       $("#general i .counter").text(' ');
    }
}

チェックボックスの状態が変更されたときにこの関数を呼び出します (selectAll チェックボックスを含む)。

更新された jsFiddle は次のとおりです: http://jsfiddle.net/8PVDy/4/

于 2013-02-06T10:06:57.203 に答える
43 
$('input[type="checkbox"]:checked').length
于 2013-02-06T10:05:50.700 に答える
11

あなたはこのようにすることができます

$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
    alert($('.test:checked').length);

});
});

私が使ったHTML

<input type="checkbox" name="test" class="test" value=""/>  
<input type="checkbox" name="test" class="test" value=""/>  
<input type="checkbox" name="test" class="test" value=""/>  
<input type="checkbox" name="checkAll" class="checkAll" value=""/>

お役に立てれば

于 2013-02-06T10:17:39.943 に答える
2

チェックされたステータスを更新するには、jQuery.prop()関数を使用します

コード：

$(function(){
    $('#general i .counter').text(' ');

    var fnUpdateCount = function() {
        var generallen = $("#general-content input[name='wpmm[]']:checked").length;
        console.log(generallen,$("#general i .counter") )
        if (generallen > 0) {
            $("#general i .counter").text('(' + generallen + ')');
        } else {
            $("#general i .counter").text(' ');
        }
    };

    $("#general-content input:checkbox").on("change", function() {
                fnUpdateCount();
            });

    $('.select_all').change(function() {
                var checkthis = $(this);
                var checkboxes = $("#general-content input:checkbox");

                if (checkthis.is(':checked')) {
                    checkboxes.prop('checked', true);
                } else {
                    checkboxes.prop('checked', false);
                }
                fnUpdateCount();
            });
});

デモ:フィドル

于 2013-02-06T10:07:27.777 に答える
0

このようなサブカテゴリのチェックボックスの onchange 関数をトリガーするように select all-handler を変更しました

$(function() {
    $('.select_all').change(function() {
        var checkthis = $(this);
        var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");

        if(checkthis.is(':checked')) {
            checkboxes.attr('checked', true);
        } else {
            checkboxes.attr('checked', false);
        }
        // make sure to trigger the onchange behaviour for the checkboxes
        $("#general-content input:checkbox").change();
    });
})

それらをトリガーするもっときれいな方法があることを覚えているようですが、それを見つけることができません

于 2013-02-06T10:12:16.737 に答える
0

これを試して。

$('.select_all').change(function() {
var num = $(this).find("input[name='wpmm[]']:checked").length;
$("#general .counter").html(num);
});
于 2013-02-06T10:09:46.247 に答える