Question

I have the following function where a top checkbox controls other checkboxes in the table.

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">

I need help re-writing the function where the #allCheckboxes check-box is in one table and the rest are in another table:

<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">

Please note that unless ALL checkboxes are selected, the top one won’t be selected. Ex. If all are selected and then one of them is unchecked, the top one would get unchecked too.

Answer 1

Check the JSFIDDLE for working solution

You can give the other checkboxes a class and check them based on the value of the controlling checkbox:

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>