Question

我有以下功能，其中顶部复选框控制表格中的其他复选框。

var $checkboxes = $("#myTbl input[type=checkbox]:not(:first)").
        not($("#myTbl input[disabled=disabled]")).
        change(function() {
            var allIsChecked = $checkboxes.length === $checkboxes.filter(":checked").length;
            $all[0].checked = allIsChecked;     
            enableProcessTagBtn();          
        });

var $all = $("#allCheckboxes").change(function() {
    $checkboxes.attr("checked", this.checked);
    enableBtn();
});

function enableBtn() {
    if ($("#myTbl input[type=checkbox]").filter(":checked").length > 0) {
        $("#Btn").removeClass("disabledBtn").attr("disabled", false);
    } else {
        $("#Btn").addClass("disabledBtn").attr("disabled", "disabled");
    }
}
enableBtn();

<table id="myTbl">
<tr>
    <td><input name="" type="checkbox" value="" id="allCheckboxes"></td>
</tr>
<tr>
    <td><input name="" type="checkbox" value=""></td>
</tr>
<tr>
    <td><input name="" type="checkbox" value=""></td>
</tr>
</table>
<input name="" type="button" id="Btn">

我需要帮助重写函数，其中#allCheckboxes复选框在一个表中，其余的在另一个表中：

<table id="myTbl1">
<tr>
    <td><input name="" type="checkbox" value="" id="allCheckboxes"></td>
</tr>
</table>

<table id="myTbl2">
<tr>
    <td><input name="" type="checkbox" value=""></td>
</tr>
<tr>
    <td><input name="" type="checkbox" value=""></td>
</tr>
</table>
<input name="" type="button" id="Btn">

请注意，除非选中所有复选框，否则将不会选择顶部复选框。防爆。如果选择了所有选项，然后取消选中其中一个，则顶部的选项也将取消选中。

Answer 1

检查JSFIDDLE是否有工作解决方案

您可以为其他复选框指定一个类，并根据控制复选框的值检查它们：

JQUERY：

$(function(){

    $('#allCheckboxes').click(function(){
        $('.otherChecks').prop("checked", this.checked);
    });

    var numChecks = $('.otherChecks').length;

    $('.otherChecks').click(function(){
        var allChecked = $('.otherChecks:checked').length === numChecks;

        $('#allCheckboxes').prop("checked", allChecked);

    });

});

HTML：

<table id="myTbl1">
  <tr>
    <td>All <input name="" type="checkbox" value="" id="allCheckboxes"></td>
  </tr>
</table>

<table id="myTbl2">
  <tr>
    <td><input name="" type="checkbox" value="" class="otherChecks"></td>
  </tr>
  <tr>
    <td><input name="" type="checkbox" value="" class="otherChecks"></td>
  </tr>
</table>

Answer 2

我认为您所要做的就是更改复选框的选择器。只是摆脱id选择器。如果你需要保留id，如果你的页面上有其他复选框，那么只需在你的两个表格旁边放一个div。

所以要么改为：

var $checkboxes = $("input[type=checkbox]:not(:first)").

并且不对ur html进行任何更改，或将其更改为

var $checkboxes = $("#tableContainer input[type=checkbox]:not(:first)").

并将ur html更改为：

<div id="tableContainer">
<table id="myTbl1">
<tr>
    <td><input name="" type="checkbox" value="" id="allCheckboxes"></td>
</tr>
</table>

<table id="myTbl2">
<tr>
    <td><input name="" type="checkbox" value=""></td>
</tr>
<tr>
    <td><input name="" type="checkbox" value=""></td>
</tr>
</table>
<input name="" type="button" id="Btn">
</div>

Answer 3

随着时间的推移，这可能表现最佳：

$(function () {
  var $all = $("#allCheckboxes"),
      $others = $("input:checkbox").not($all);

    $all.bind("change", function () {
        $others.attr("checked", this.checked);
    });
});

一个表中的复选框控制另一个表中的复选框

3 个答案: