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

Question

我有一个带有复选框“删除”数组和一个复选框“togglechbx”的 HTML 表单，用于切换所有复选框以选中/取消选中。因此，当没有选中任何 delete[] 时，必须禁用“delete-selected-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>

Answer 1

这是我想出的：

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

令人惊叹的演示：http://jsfiddle.net/Wfdy3/3/

我在上面所做的是，每当单击任何delete-img 复选框时，我都会找出其中有多少被选中，然后如果该数字为零，则禁用delete-selected-btn 按钮。然后 if/else 如果没有选中其他复选框，则取消选中主切换复选框，或者如果选中所有其他复选框，则检查主切换复选框 - 如果选中了部分但不是全部，它不会更改主复选框的状态。从您的描述中我不清楚您是否希望自动检查主复选框的工作方式 - 如果您只想检查是否检查了所有其他复选框，您可以将四行 if/else 结构替换为 @987654326 @如图所示：http://jsfiddle.net/Wfdy3/4/

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

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

还要注意，.prop() 是用于设置禁用状态的适当 jQuery 方法，而不是 attr() 和 removeAttr()（我假设您使用的 jQuery 版本足够新，可以使用 @987654331 @假设你自己在一个地方使用过。）

Answer 2

你可以试试这样的：

$(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();
    });
});

Answer 3

<form id="show-images">
<div class="toggle">
<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" >Delete selected</button>
</div>
</form>

javascript

$("#show-images") .submit(function(){

$(".toggle") .toggle();

$('#delete-selected-btn').attr('disabled', '');

return false;
});