选中所有复选框而不触发其各自的.change功能

Question

我有一个表格，每行上都有一个复选框，再加上一个标题复选框，您可以将它们全部选中，此代码可以很好地工作：

var idArray = [];

$(function(event, request, settings){

    //This method is explained later in the post
    //It takes care of storing checked rows into an array
    setupStoreSelected();

    $(function(){
        //Get every checkbox in table body 
        var $checkboxes = $("tbody").find(":checkbox");

        //When checkAll is clicked, check/uncheck every enabled checkbox
        $("#checkAll").on("click", function(){
            $($checkboxes).not(":disabled").prop('checked', $(this).prop('checked'));
        });

        //Uncheck global if any individual checkbox is unchecked
        $("tbody").on("change", function () {
            if (!$(this).prop("checked")) {
                $("#checkAll").prop("checked", false);
            }
        });
    }); 
});

function setupStoreSelected(){

    //This selector listens to every checkbox except for the CheckAll
    $("input:checkbox:not('#checkAll')").change(function(){
        //Get that row's ID value from its column 
        var id = $(this).closest("tr").find("td.idColumn").text();

        //If it is checked now, push that ID into a global array
        if($(this).prop("checked")){
            idArray.push(id);
            console.log("Added ID : " + id);
        }

        //Search and delete it from array if it gets unchecked
        else{
            var index = idArray.indexOf(id);
            if(index > -1){
                idArray.splice(index,1);
                console.log("Deleted ID : " + id);
            }           
        }   
    });
}

table{
  border : 1px solid grey;
}

thead{
  background-color : silver;
}

td{
  text-align : center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" width="20%">
		<thead>
			<tr>
				<th>ID</th>
				<th><input type="checkbox" id="checkAll" value="false"></th>

			</tr>
		</thead>
  <tbody>
    <tr>
      <td class="idColumn">001</td>
      <td><input type="checkbox"/></td>
    </tr>
    <tr>
      <td class="idColumn">002</td>
      <td><input type="checkbox"/></td>
    </tr>
    <tr>
      <td class="idColumn">003</td>
      <td><input type="checkbox"/></td>
    </tr>
    <tr>
      <td class="idColumn">004</td>
      <td><input type="checkbox"/></td>
    </tr>
  </tbody>
	</table>

问题在于checkAll复选框不会触发各个复选框的.change(...)功能，因此根本无法使用。

我该如何修改我的代码，以便单个复选框和所有复选框都存储ID ？？

Answer 1

您可以使用trigger('change')来触发所有单个复选框的更改事件：

//When checkAll is clicked, check/uncheck every enabled checkbox
 $("#checkAll").on("click", function(){
      $($checkboxes).not(":disabled").prop('checked', $(this).prop('checked')).trigger('change');
 });

Answer 2

最后，这就是我让它起作用的方式：

var idArray = [];

$(document).on('change', '#checkAll', function(e) {
        var checkboxes = $('tbody').find(':checkbox').not(":disabled");
		if($(this).is(':checked')) {
			checkboxes.prop('checked', true);
			checkboxes.each(
				function() {
					checkTerminal($(this).closest("tr").find("td.idColumn").text());		
				}
			);
		} else {
			checkboxes.prop('checked', false);
			checkboxes.each(
				function() {
					uncheckTerminal($(this).closest("tr").find("td.idColumn").text());			
				}
			);
		}
	});

	$(document).on('change', ':checkbox', function(e) {
		var id = $(this).closest("tr").find("td.idColumn").text();
		if($(this).is(':checked')) {
			checkTerminal(id);
		} else {
			uncheckTerminal(id);
		}
		
	});

function checkTerminal(id){
    if((idArray.indexOf(id) == -1) && (id!="") && (id!=null)){
        idArray.push(id);
        console.log("Adding ID : " + id);
    }
    
}

function uncheckTerminal(id){
    var index = idArray.indexOf(id);
	if((index != -1) && (id!="") && (id!=null)){
		idArray.splice(index,1);
		console.log("Deleting ID : " + id);
	}	
}

table{
    border : 1px solid grey;
  }
  
  thead{
    background-color : silver;
  }
  
  td{
    text-align : center;
  }
  
  *{
      font-family: Roboto, sans-serif;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" width="20%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th><input type="checkbox" id="checkAll" value="false"></th>
    
                </tr>
            </thead>
      <tbody>
        <tr>
          <td class="idColumn">001</td>
          <td><input type="checkbox"/></td>
        </tr>
        <tr>
          <td class="idColumn">002</td>
          <td><input type="checkbox"/></td>
        </tr>
        <tr>
          <td class="idColumn">003</td>
          <td><input type="checkbox" disabled/></td>
        </tr>
        <tr>
          <td class="idColumn">004</td>
          <td><input type="checkbox"/></td>
        </tr>
      </tbody>
        </table>