带有复选框的表格 - 选中所有复选框并将值传递给 AJAX 脚本答案

【问题标题】：Table with Checkboxes - selected all Checkboxes and pass values to AJAX script带有复选框的表格 - 选中所有复选框并将值传递给 AJAX 脚本
【发布时间】：2017-12-27 03:24:54
【问题描述】：

我在第一列中有一个带有复选框的表 - 选中后，它将执行一个 AJAX 脚本，该脚本使用选定的值更新 PHP 会话变量。这一切都很好，但我现在需要扩展它以在第一列顶部有一个复选框，以允许用户选择表中的所有项目并将所选项目的值（例如逗号分隔）作为AJAX 脚本的参数 - 假设我为此需要一个新脚本。

这是我目前所拥有的：

$(document).ready(function() {
  $("input.select-item").click(function() {
    var productID = $(this).val();
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('productSelections.php', {
      type: 'updateSelections',
      productID: productID,
      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';
        $this.closest('td').addClass("has-error");
        $("#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';
      $this.closest('td').addClass("danger");
      $("#updateSelectionsErrorMessage").html(ajaxError);
      $("#updateSelectionsError").show();
    });
  });
});

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

我在第一行添加了一个复选框，可用于选择所有项目 - 基本上相当于逐个单击每个复选框。不确定如何扩展或创建一个新脚本，单击该脚本时会检查每个复选框并将 ID 值传递给我可以包含在我的 AJAX 脚本中的变量？

【问题讨论】：

您可以将 ajax 调用放在一个单独的函数中，而不仅仅是 1 个productID，您可以让它接受productIDs 的数组。然后，您可以使用相同的函数更新单个 productID 或多个 productIDs，而无需多个 ajax 请求。

标签： javascript jquery ajax checkbox

【解决方案1】：

$('.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);
    });
});

【讨论】：

【解决方案2】：

在下面添加了这个成功的代码：

$("input.select-all").click(function() {
    $("input.select-item").each(function() {
        $(this).trigger('click');
    });
});

$(document).ready(function() {

  $("input.select-all").click(function() {
    $("input.select-item").each(function() {
      $(this).trigger('click');
    });
  });
  $("input.select-item").click(function() {
    var productID = $(this).val();
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('productSelections.php', {
      type: 'updateSelections',
      productID: productID,
      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';
        $this.closest('td').addClass("has-error");
        $("#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';
      $this.closest('td').addClass("danger");
      $("#updateSelectionsErrorMessage").html(ajaxError);
      $("#updateSelectionsError").show();
    });
  });
});

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

【讨论】：

它可以解决问题，但它也执行 4 个单独的 ajax 请求，这可以很容易地在一个请求中完成。在示例中它只有 4 个项目，但想象一下它是一个包含一百个或更多项目的列表。你真的不想那样。
是的。我调用了一个现有函数，因为我认为将其更改为 1 个请求意味着对 AJAX 请求和 productSelections.php 进行小的更改，我避免了。

【解决方案3】：

此选项适用于多个带有全选复选框的table。

特点：

在全选复选框的基础上选中/取消选中
在单个复选框单击时，仅通过其 id 和 检查状态

从callUpdate

致电您的AJax

// This will work with multiple table items
// on page

$(document).ready(function(){
  
  function callUpdate( ids, isChecked ){
    alert( 'Check status is: ' + isChecked + '\nids:\n' + ids.join(', ') ); 
  }
  
  
  var allSelectAllCheckboxes = $('thead th:first .select-all');
  
  // On related checkbox clicked individually
  allSelectAllCheckboxes.closest('table').find('tbody .select-item').click(function(){
    
    var $el = $(this);
    callUpdate( [ $el.val() ], $el.prop('checked') );
  
  });
  
  // Look for master checkbox within table thead
  allSelectAllCheckboxes.click(function(){
    
    // Get clicked checkbox
    var $clickedCheckbox = $(this);
        isSelectAllChecked = $clickedCheckbox.prop('checked'),
        $targetCheckboxes = $clickedCheckbox.closest('table').find('[name=select-item]'),
        ids = [];

    
    // Enumerate through each target checkbx
    $targetCheckboxes.each( function(){

      // Set checkbox check/uncheck 
      // according to 'select all' status
      this.checked = isSelectAllChecked;
      
      // Push product id to collection
      ids.push( this.value );
    });
   
    // Call update using our proxy function
    callUpdate( ids, isSelectAllChecked );
    
  });
  
  
});

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

【讨论】：