将复选框选中状态传递给 AJAX 脚本 [重复]答案

【问题标题】：Pass checkbox checked state to AJAX script [duplicate]将复选框选中状态传递给 AJAX 脚本 [重复]
【发布时间】：2017-07-21 15:42:05
【问题描述】：

我在第一列中有一个带有复选框的表 - 选中后，它将执行一个 AJAX 脚本，该脚本使用选定的值更新 PHP 会话变量。这一切都很好，但我现在需要更新它，以便它传递复选框的状态，以便我可以将选定的值添加到 PHP 数组或从 PHP 数组中删除选定的值。

我不知道如何将选中状态作为附加参数包含在 AJAX 发布请求中 - 否则我无法确定是在数组中添加还是删除 productID 值。

这是我目前所拥有的：

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

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

【问题讨论】：

标签： javascript jquery ajax checkbox

【解决方案1】：

实际上有多种解决方案。

您可以为此使用$("input.select-item").attr 或$("input.select-item").prop 或$("input.select-item").is：

$("input.select-item").attr( "checked" ): checked
$("input.select-item").prop( "checked" ): true
$("input.select-item").is( ":checked" ): true

就个人而言，我更喜欢$().prop

这是一个文档http://api.jquery.com/prop/

但是要选择选中的复选框元素，您可以简单地使用 :checked 选择器：

$("select-item:checked")

【讨论】：

【解决方案2】：

解决方法很简单：

您可以使用以下方法获取值：$('#idOfElement').is(":checked");，它返回true 或false。然后您可以将该值附加到您的data JSON，并通过 ajax 发送。

附加示例：

data["checkboxChecked"] = $('#idOfElement').is(":checked");

希望这会有所帮助！

【讨论】：