Question

我希望弄清楚链接功能有两件事没有考虑到：

如果您单独选中复选框，则该按钮不会将其显示值更改为“取消全选”。
如果您选中一个复选框，然后取消选中相同的复选框，则“全选”按钮将设置为首先取消选中 - 即使没有选中任何内容。

http://jsfiddle.net/point71echo/pxxnhb35/3/

HTML：

<div id="first">
    <input type="button" id="checkAll" value="Select All " data-type="uncheck">  

        <div class="button">    
            <input type="checkbox" name="option1" id="Item 1" class="first">
            <label for="Item 1" class="label1">Item 1</label>
            <input type="checkbox" name="option1" id="Item 2" class="first">
            <label for="Item 2" class="label1">Item 2</label><br><br>
            <input type="checkbox" name="option1" id="Item 3" class="first">
            <label for="Item 3" class="label1">Item 3</label>
            <input type="checkbox" name="option1" id="Item 4" class="first">
            <label for="Item 4" class="label1">Item 4</label><br><br>
        </div>  
    </div>

jQuery的：

$(document).ready(function(){
    // below code is used to remove all check property if,
    // user select/unselect options with class first options.    
    $(".first").click(function(){
        $("#checkAll").attr("data-type","uncheck"); 
                $(this).val('Select All');
    });

    $("#checkAll").attr("data-type","check");
    $("#checkAll").click(function(){
        if($("#checkAll").attr("data-type")==="check")
          {
            $(".first").prop("checked",true); 
            $("#checkAll").attr("data-type","uncheck");
                $(this).val('Deselect All')
          }
        else
          {
            $(".first").prop("checked",false);
            $("#checkAll").attr("data-type","check");
                $(this).val('Select All');
          }
    }) 

});

Answer 1

因为你只告诉什么不起作用，什么不正常，所以很难弄清楚应该是什么样的行为。请尝试以下代码：

$(".first").click(function(){
    if ($(".first:checked").length > 0) {
        $("#checkAll").("data-type","uncheck").('Deselect All');
    } else {
        $("#checkAll").("data-type","check").('Select All');
    }
});

现在，当您选中一个或多个复选框时，类型和文本将更改为“取消全选” 如果没有复选框，则按钮显示“全选”

Answer 2

实际上，您的代码在灵活性和可维护性方面几乎没有问题。

原因是：

您正在检查数据类型属性而不是复选框值。
单击按钮运行该功能。因此，如果单击复选框，则此后事件未注册。

这就是我要做的事情：

$('#checkAll').click(function (event) { //on click 
    if ($("#checkAll").attr("data-type") === "unchecked") { // check select status
        $('.checkbox1').each(function () { //loop through each checkbox
            this.checked = true; //select all checkboxes with class "checkbox1"
            $("#checkAll").val('Deselect All');
            $("#checkAll").attr("data-type", "checked");
        });
    } else {...

我为你设置了一个小提琴，这远非完美，但是它朝着你的目标前进。

http://jsfiddle.net/carlodurso/uLbwunwh/

快乐的调整。

根据单独选中的复选框更改按钮值

2 个答案: