选择所有复选框 - 切换打开和关闭

Question

我在第一列中有一个带有复选框的表 - 当选中时，它执行一个AJAX脚本，用所选值更新PHP会话变量。我还在第一列顶部有一个复选框，允许用户选择表中的所有项目并执行AJAX脚本。

我有这个用于＆＃34;未选中时选择所有＆＃34;状态，即页面首次加载时。我现在需要添加反向状态 - 取消选中页面上的所有复选框。

以下是我的表格外观以及单击表格标题中的复选框时运行的脚本：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.select-all').on('click', function() {
    var values = []; // will contain all checkbox values that you can send via ajax
    $('table > tbody input[type="checkbox"]').each(function(i, el) {
      $(el).prop('checked', true);
      values.push(el.value);
    });
    var productIDs = values.join();;
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('productSelections.php', {
      type: 'updateSelections',
      productIDs: productIDs,
      selectionType: 'single'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating the Product Selections Selections - ' + ajaxError;
        $this.closest('td').addClass("danger");
        //display AJAX error details
        $("#updateSelectionsErrorMessage").html(errorAlert);
        $("#updateSelectionsError").show();
        return; // stop executing this function any further
      } else {
        $this.closest('td').addClass("success")
        $this.closest('td').removeClass("danger");
      }

    }).fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating the Product Selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Apple Business Operations';
      $this.closest('td').addClass("danger");
      $("#updateSelectionsErrorMessage").html(ajaxError);
      $("#updateSelectionsError").show();
      $this.attr('checked', false); // Unchecks it
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th><input type="checkbox" class="select-all checkbox" name="select-all" /></th>
    <th class="text-center" scope="col">Product ID</th>
    <th class="text-center" scope="col">Description</th>
  </thead>
  <tbody>

    <tr class="" id="85799">
      <td id="AT36288"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td>
      <td>AT36288</td>
      <td>Apples</td>
      <td></td>
    </tr>
    <tr class="" id="85800">
      <td id="AT36289"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td>
      <td>AT36289</td>
      <td>Bananas</td>
      <td></td>
    </tr>
    <tr class="" id="85801">
      <td id="AT36290"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td>
      <td>AT36290</td>
      <td>Oranges</td>
      <td></td>
    </tr>
    <tr class="" id="85803">
      <td id="AT36292"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36292" /></td>
      <td>AT36292</td>
      <td>Grapes</td>
      <td></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

如果当前选中了复选框，我只能找出要更改的内容以取消选中所有复选框？

Answer 1

您只需要检查当前是否选中了复选框。

$(document).ready(function() {
  $('.select-all').on('click', function() {
    var values = []; // will contain all checkbox values that you can send via ajax
    $('table > tbody input[type="checkbox"]').each(function(i, el) {
      
      
      // If checkboxes are currently checked, uncheck.
    
      if($(el).prop('checked')) $(el).prop('checked', false) 
      else $(el).prop('checked', true);



      values.push(el.value);
    });
    var productIDs = values.join();;
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('productSelections.php', {
      type: 'updateSelections',
      productIDs: productIDs,
      selectionType: 'single'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating the Product Selections Selections - ' + ajaxError;
        $this.closest('td').addClass("danger");
        //display AJAX error details
        $("#updateSelectionsErrorMessage").html(errorAlert);
        $("#updateSelectionsError").show();
        return; // stop executing this function any further
      } else {
        $this.closest('td').addClass("success")
        $this.closest('td').removeClass("danger");
      }

    }).fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating the Product Selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Apple Business Operations';
      $this.closest('td').addClass("danger");
      $("#updateSelectionsErrorMessage").html(ajaxError);
      $("#updateSelectionsError").show();
      $this.attr('checked', false); // Unchecks it
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th><input type="checkbox" class="select-all checkbox" name="select-all" /></th>
    <th class="text-center" scope="col">Product ID</th>
    <th class="text-center" scope="col">Description</th>
  </thead>
  <tbody>

    <tr class="" id="85799">
      <td id="AT36288"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td>
      <td>AT36288</td>
      <td>Apples</td>
      <td></td>
    </tr>
    <tr class="" id="85800">
      <td id="AT36289"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td>
      <td>AT36289</td>
      <td>Bananas</td>
      <td></td>
    </tr>
    <tr class="" id="85801">
      <td id="AT36290"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td>
      <td>AT36290</td>
      <td>Oranges</td>
      <td></td>
    </tr>
    <tr class="" id="85803">
      <td id="AT36292"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36292" /></td>
      <td>AT36292</td>
      <td>Grapes</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用该顶部复选框的状态来确定是应该选中还是取消选中全部。喜欢这个

$(document).ready(function() {
  $('.select-all').on('click', function() {
    var shouldCheck = $(this).is(":checked");
    $('table > tbody input[type="checkbox"]').each(function(i, el) {
      $(el).prop('checked', shouldCheck);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th><input type="checkbox" class="select-all checkbox" name="select-all" /></th>
    <th class="text-center" scope="col">Product ID</th>
    <th class="text-center" scope="col">Description</th>
  </thead>
  <tbody>

    <tr class="" id="85799">
      <td id="AT36288"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td>
      <td>AT36288</td>
      <td>Apples</td>
      <td></td>
    </tr>
    <tr class="" id="85800">
      <td id="AT36289"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td>
      <td>AT36289</td>
      <td>Bananas</td>
      <td></td>
    </tr>
    <tr class="" id="85801">
      <td id="AT36290"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td>
      <td>AT36290</td>
      <td>Oranges</td>
      <td></td>
    </tr>
    <tr class="" id="85803">
      <td id="AT36292"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36292" /></td>
      <td>AT36292</td>
      <td>Grapes</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 3

检查此代码我认为它符合您的要求。 如果取消选中所有子选项，如果取消选中任何子选项，则取消选中其全选复选框。

       $('.select-all').on('click', function () {
              
                if ($(this).is(":checked")) {
                    $('.select-item').prop('checked', this.checked);
                  
                } else {

                    $(".select-item").removeAttr('checked');
                    $(".select-all").removeAttr('checked');
                  
                }
                  });
$('.select-item').on('click', function () {
            if ($('.select-item:checked').length === $('.select-item').length) {
                $(".select-all").prop('checked', true);
            
            }
            var s = $(this).is(":checked");
            if (s === false) {
                $(".select-all").removeAttr('checked');
               
            }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th><input type="checkbox" class="select-all checkbox" name="select-all" /></th>
    <th class="text-center" scope="col">Product ID</th>
    <th class="text-center" scope="col">Description</th>
  </thead>
  <tbody>

    <tr class="" id="85799">
      <td id="AT36288"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td>
      <td>AT36288</td>
      <td>Apples</td>
      <td></td>
    </tr>
    <tr class="" id="85800">
      <td id="AT36289"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td>
      <td>AT36289</td>
      <td>Bananas</td>
      <td></td>
    </tr>
    <tr class="" id="85801">
      <td id="AT36290"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td>
      <td>AT36290</td>
      <td>Oranges</td>
      <td></td>
    </tr>
    <tr class="" id="85803">
      <td id="AT36292"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36292" /></td>
      <td>AT36292</td>
      <td>Grapes</td>
      <td></td>
    </tr>
  </tbody>
</table>