根据单独选择的复选框更改按钮值答案

【问题标题】：Changing button value based on checkboxes selected individually根据单独选择的复选框更改按钮值
【发布时间】：2015-01-22 14:51:36
【问题描述】：

链接函数没有解决我希望弄清楚的两件事：

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

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');
          }
    }) 

});

【问题讨论】：

标签： javascript jquery html button checkbox

【解决方案1】：

因为你只知道什么不起作用，什么起作用不正确，所以很难弄清楚期望的行为应该是什么。试试下面的代码：

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

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

【讨论】：

我试图保留所有已设置的功能，同时选中任何单个复选框会导致按钮显示“取消全选”。我的意思是删除额外的代码。这是一个更新的小提琴...jsfiddle.net/point71echo/pxxnhb35/3
看看更改后的答案
我之前的陈述是暗示我的原始代码中当前可用的所有功能都是需要的。我只希望调整此代码，以便在选中一个或多个复选框时，按钮将其文本更改为“取消全选”。我对 jQuery 很陌生，所以我的词汇量有限，如果我感到困惑，我深表歉意。我无法让您的代码正常工作。你能把它的一个功能版本保存到一个小提琴中，这样我就可以一起看到所有的代码，以防我遗漏了什么。感谢您的帮助。

【解决方案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/

调整愉快。

【讨论】：