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

问题描述

我在第一列中有一个带有复选框的表-选中后，它将执行AJAX脚本，该脚本将使用所选值更新PHP会话变量.一切正常，但我现在需要扩展此功能，以便在第一列的顶部具有一个复选框，以允许用户选择表中的所有项目，并将所选项目的值(例如，逗号分隔)作为参数作为AJAX脚本的参数-假设我为此需要一个新的脚本.

I have a table with a checkbox in the first column - when checked this performs an AJAX script that updates a PHP session variable with the selected values. This is all working well but I now need to extend this to have a check box at the top of the first column to allow the user to select all items in the table and pass the value of the selected items (e.g. comma separated) as a parameter to the AJAX script - assuming I need a new script just for this.

这是我到目前为止所拥有的:

Here's what I have so far:

$(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脚本中的变量?

I've added a checkbox in the first row that can be used to select all items - essentially the equivalent of clicking each checkbox one by one. Not sure how to either extend or create a new script that when clicked checks each checkbox and passes the ID values to a variable that I can include in my AJAX script?

推荐答案

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

这篇关于带复选框的表格-选中所有复选框并将值传递给AJAX脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！