javascript同时切换所有和禁用按钮

我有一个HTML表单，带有复选框“delete”数组和一个复选框“togglechbx”，用于切换所有复选框以选中/取消选中。因此，当没有选中delete[]时，必须禁用“删除所选btn”，并且必须自动取消选中复选框“togglechbx”

下面的javascript实现了这一点，但我从不同的stackoverflow示例中组合了它。这就是它看起来如此丑陋和凌乱的原因。你们能不能看一下，有没有办法让它更短更干净？先谢谢你

<form id="show-images">
<input id="togglechbx" type="checkbox" onClick="toggle(this);" />
<input type="checkbox" class="delete-img" name="delete[]" value="1"/>
<input type="checkbox" class="delete-img" name="delete[]" value="2"/>
<input type="checkbox" class="delete-img" name="delete[]" value="3"/>
<button id="delete-selected-btn" type="submit" disabled="disabled">Delete selected</button></form>
<script>
        $('.delete-img').change(function(){
         var arrlenght = $("#show-images input:checkbox:checked").length;
         if ( arrlenght > 0){
         if ( arrlenght == 1 && document.getElementById("togglechbx").checked) {
            $("#togglechbx").prop("checked", false);
            $('#delete-selected-btn').attr("disabled", "disabled");
            return false;
         }
         // any one from delete is checked
            $('#delete-selected-btn').removeAttr("disabled");
         }else{
         // none is checked
              $('#delete-selected-btn').attr("disabled", "disabled");
       }});

    function toggle(source) {
               checkboxes = document.getElementsByName('delete[]');
               for(var i=0, n=checkboxes.length; i<n; i++) {
                checkboxes[i].checked = source.checked;
                if ($("#show-images input:checkbox:checked").length > 0){
                        $('#delete-selected-btn').removeAttr("disabled");
                }else{
                // none is checked
                        $('#delete-selected-btn').attr("disabled", "disabled");
                 }
              }
    }
</script>

删除所选内容
$（'.delete img'）.change（function（）{
var arrlenght=$（“#显示图像输入：复选框：选中”）。长度；
如果（长度>0）{
if（arrlenght==1&&document.getElementById（“togglechbx”）.checked）{
$（“#togglechbx”）.prop（“选中”，false）；
$（“#删除所选btn”）.attr（“禁用”、“禁用”）；
返回false；
}
//选中删除中的任何一个
$（“#删除选定的btn”）.removeAttr（“禁用”）；
}否则{
//没有被选中
$（“#删除所选btn”）.attr（“禁用”、“禁用”）；
}});
函数切换（源）{
复选框=document.getElementsByName（'delete[]）；
对于（变量i=0，n=checkbox.length；i 0）{
$（“#删除选定的btn”）.removeAttr（“禁用”）；
}否则{
//没有被选中
$（“#删除所选btn”）.attr（“禁用”、“禁用”）；
}
}
}

以下是我的想法：

(function() {
  var $delBtn = $("#delete-selected-btn"),
      $delCBs = $("input.delete-img").click(function() {
          var checkedCount = $delCBs.filter(":checked").length;
          $delBtn.prop("disabled", checkedCount === 0);
          if (checkedCount === 0)
            $toggleCB.prop("checked", false);
          else if (checkedCount == $delCBs.length)
            $toggleCB.prop("checked", true);
       }),
       $toggleCB = $("#togglechbx").click(function() {
          $delCBs.prop("checked", this.checked);
          $delBtn.prop("disabled", !this.checked);
       });
})();

令人惊叹的Jawdropping演示：

我在上面所做的是，每当单击任何

delete img

复选框时，我都会找出其中有多少复选框被选中，然后禁用

delete selected btn

按钮（如果该数字为零）。然后，如果没有选中其他复选框，if/else将取消选中主切换复选框，或者如果选中了所有其他复选框，则选中主切换复选框-如果选中了部分复选框，但未选中全部复选框，则不会更改主复选框的状态。从您的描述中，我不清楚您是否希望主复选框的自动检查是这样工作的-如果您只希望检查主复选框，那么如果检查了所有其他复选框，您可以用

$toggleCB.prop（“checked”，checkedCount====$delCBs.length）替换四行if/else结构如图所示：

然后，在主切换复选框的单击处理程序中，我只需将所有其他复选框设置为与主切换复选框相同的状态，并根据需要启用或禁用
delete selected btn
按钮

请注意，匿名函数只是为了将变量排除在全局范围之外，我使用的是单击处理程序而不是更改处理程序，因为（我隐约记得）在某些浏览器中，当通过键盘更改复选框时，直到复选框失去焦点，才会发生更改事件，但是单击事件与鼠标或键盘一起工作

还要注意，
.prop（）
是用于设置禁用状态的适当jQuery方法，而不是
attr（）
和
removeAttr（）
（我假设您使用的jQuery版本足够新，可以使用
.prop（）
，因为您自己在一个地方使用过它。）
您可以尝试以下方法：

$(function() {
    $("#show-images>.delete-img").change(function() {
        if ($("#show-images>.delete-img:checked").length) {
            $("#delete-selected-btn").removeAttr("disabled");
        } else {
            $("#delete-selected-btn").attr("disabled", "disabled");
        }

        $("#togglechbx").prop("checked", $("#show-images>.delete-img").length == $("#show-images>.delete-img:checked").length);
    });

    $("#togglechbx").change(function() {
        $("#show-images>.delete-img").each(function (i, e) {
            $(e).prop("checked", $("#togglechbx").prop("checked"));
        });
        $("#show-images>.delete-img").change();
    });
});

这肯定比OP的代码要短，但是它做了一些完全不同的事情，所以…为什么需要更改输入的name属性？当前名称是合法的，或者那些元素已经有了一个公共类。没错，我只是不喜欢在名称中使用括号：）使用类更新代码。是的，我也不太喜欢名称中的括号，但我假设OP使用的是PHP。在toggle上，所有按钮均未激活，仅在选中单个复选框时，禁止将其中一个
[name='delete']
更改为
。删除img
，这是固定的。这是我梦寐以求的。非常感谢。当然，复选框大师的表演必须和你剧本中的完全一样，而不是像我做的那样。
(function() {
  var $delBtn = $("#delete-selected-btn"),
      $delCBs = $("input.delete-img").click(function() {
          var checkedCount = $delCBs.filter(":checked").length;
          $delBtn.prop("disabled", checkedCount === 0);
          if (checkedCount === 0)
            $toggleCB.prop("checked", false);
          else if (checkedCount == $delCBs.length)
            $toggleCB.prop("checked", true);
       }),
       $toggleCB = $("#togglechbx").click(function() {
          $delCBs.prop("checked", this.checked);
          $delBtn.prop("disabled", !this.checked);
       });
})();

$(function() {
    $("#show-images>.delete-img").change(function() {
        if ($("#show-images>.delete-img:checked").length) {
            $("#delete-selected-btn").removeAttr("disabled");
        } else {
            $("#delete-selected-btn").attr("disabled", "disabled");
        }

        $("#togglechbx").prop("checked", $("#show-images>.delete-img").length == $("#show-images>.delete-img:checked").length);
    });

    $("#togglechbx").change(function() {
        $("#show-images>.delete-img").each(function (i, e) {
            $(e).prop("checked", $("#togglechbx").prop("checked"));
        });
        $("#show-images>.delete-img").change();
    });
});