Question

我有带有复选框“删除”数组的HTML表单和一个复选框“togglechbx”来切换所有复选框以选中/取消选中。因此，如果未选中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);
       });
})();

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

我上面所做的是，只要点击delete-img复选框中的任何一个，我就会发现其中有多少个被选中，如果该数字为零则禁用delete-selected-btn按钮。然后，如果没有选中其他任何一个，则if / else取消选中主切换复选框，或检查主切换是否检查了所有其他切换 - 如果检查了一些但不是全部，则不会更改主复选框的状态。我不清楚你的描述是否你希望自动检查主复选框是如何工作的 - 如果你只想检查是否所有其他选项都被检查了你可以用{{替换四行if / else结构1}}如下所示：http://jsfiddle.net/Wfdy3/4/

然后在主切换复选框的点击处理程序中，我只是将所有其他复选框设置为与主设备相同的状态，并根据需要启用或禁用$toggleCB.prop("checked", checkedCount === $delCBs.length);按钮。

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

另请注意，delete-selected-btn是用于设置禁用状态的相应jQuery方法，而不是.prop()和attr()（我假设您正在使用足够新的jQuery版本鉴于您在一个地方自己使用removeAttr()，可以使用.prop()。）

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

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

3 个答案: