Question

我得到了选择计数器，根据所做的选择添加/减少计数。我唯一的问题是选择＆＃39; All＆＃39;然后取消选择它。当我选择它时，计数器显示1已选中，这是可以的，但是当我取消选择它时，计数器显示选择＆＃39; 2这是错的，因为没有选择！我做错了什么？

DEMO

<div id="checkbox_counter"><input type="hidden" name="category[]"  value="0">Select...</div></div>

<label for="all"><input type="checkbox" id="all" class="category_all">All</label>  <br>  
<label for="test1"><input type="checkbox" id="test1" class="all_select">test1</label> <br>
<label for="test2"><input type="checkbox" id="test2" class="all_select">test2</label>

jquery的：

$(function() {
    $("input[type=checkbox]").change(function() {
        var total_checked = $("input[type=checkbox]:checked").length;
        var all_list = $("input.category_all[type=checkbox]:checked").length;   

        if(total_checked > 0){
            if(all_list.length > 0){
                $('#checkbox_counter').replaceWith('<div id="checkbox_counter">All Selected</div>');
            }else{
                $('#checkbox_counter').replaceWith('<div id="checkbox_counter">'+total_checked+' Selected</div>');
            }           
        }else{
            $('#checkbox_counter').replaceWith('<div id="checkbox_counter">Select...</div>');
        }

        if ($(this).hasClass("category_all")) {                     
            $(".all_select").prop("checked", all_list).prop("disabled", all_list);      
        }       
    });
});

Answer 1

你的错误是你在检查子复选框之前检查了复选框计数，所以你只需要更改像他的代码流：

$(function() {
    $("input[type=checkbox]").change(function() {
        var all_list = $("input.category_all[type=checkbox]:checked").length;

        if ($(this).hasClass("category_all")) {                     
            $(".all_select").prop("checked", all_list).prop("disabled", all_list);      
        }

        var total_checked = $("input[type='checkbox']:checked").length;


        if(total_checked > 0){
            if(all_list.length > 0){
                $('#checkbox_counter').replaceWith('<div id="checkbox_counter">All Selected</div>');
            }else{
                $('#checkbox_counter').replaceWith('<div id="checkbox_counter">'+total_checked+' Selected</div>');
            }           
        }else{
            $('#checkbox_counter').replaceWith('<div id="checkbox_counter">Select...</div>');
        }



    });
});

UPDATED FIDDLE

Jquery选中复选框计数器在取消选择时显示错误的值

1 个答案: