jQuery在提交时设置每个勾选复选框的每个前一个兄弟的值

Question

我一直在为此寻找解决方案，发现最有效的方法是通过像这样的 hacky 解决方法，但没有一个发布了一种有效的方法来使用大量复选框数组。

我环顾四周，看到了一种脚本方式——让隐藏的输入成为 POST 源，并在提交时根据它们相邻的复选框更改值。但是 jquery 似乎不起作用——它总是提交一个 0 值（无论隐藏输入中的 value 属性是什么。

$(document).ready(function() {
  $('#frm').submit(function() {
    $('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->

Answer 1

您的代码有效

我们讨论后我会删除这个答案

我已将隐藏更改为文本并添加了 preventDefault 以显示它的工作原理

$(document).ready(function() {
  $('#frm').on("submit",function(e) {
    e.preventDefault(); //while testing
    $('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="text" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
<input type="submit"/>
</form>

Answer 2

考虑以下示例。

$(function() {
  function getTableData(table) {
    var results = [];
    $("tbody > tr", table).each(function(i, row) {
      results.push({
        id: $(row).data("uid"),
        isHeadofHousehold: $("input", row).eq(0).prop("checked"),
        isEmployed: $("input", row).eq(1).prop("checked")
      });
    });
    return results;
  }
  $('#frm').on("submit", function(e) {
    e.preventDefault();
    var formData = getTableData($("#myTable"));
    console.log(formData);
  });
});

.checkbox {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Head of Household</th>
        <th>Employed</th>
      </tr>
    </thead>
    <tbody>
      <tr data-uid="1001">
        <td>Homer Simpson</td>
        <td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]" checked></td>
        <td class="checkbox"><input type="checkbox" name="isEmployed[]" checked></td>
      </tr>
      <tr data-uid="1002">
        <td>Marge Simpson</td>
        <td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]"></td>
        <td class="checkbox"><input type="checkbox" name="isEmployed[]"></td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Save" />
</form>

你现在有：

[
  {
    "id": 1001,
    "isHeadofHousehold": true,
    "isEmployed": true
  },
  {
    "id": 1002,
    "isHeadofHousehold": false,
    "isEmployed": false
  }
]

然后您可以使用 AJAX 将此数据 POST 回 PHP，以便将更改保存到 SQL。如前所述，如果您愿意，可以将它们分别切换为1 和0。

更新

回到 OP 想要的方法，考虑以下。

$(function() {
  $("#frm").on("change", "input[type='checkbox']", function(event) {
    $(this).prev(".checkboxHandler").val($(this).prop("checked") ? 1 : 0);
  });
});

.checkbox {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Head of Household</th>
        <th>Employed</th>
      </tr>
    </thead>
    <tbody>
      <tr data-uid="1001">
        <td>Homer Simpson</td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="1" />
          <input type="checkbox" checked />
        </td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isEmployed[]" value="1" />
          <input type="checkbox" checked />
        </td>
      </tr>
      <tr data-uid="1002">
        <td>Marge Simpson</td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0" />
          <input type="checkbox" />
        </td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0" />
          <input type="checkbox" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Save" />
</form>

这会在用户进行更改时更新隐藏文本框的值。

如果您坚持使用原始代码，请使用以下代码：

$('input[type="checkbox"]:checked').prevAll('.checkboxHandler').val(1);

我强烈建议不要使用它，因为这是一种单向逻辑，如果用户在提交表单之前取消选中某个框，则不会捕获更改。

更新 2

根据此处评分最高的答案，您也可以这样做：

<td>
  <input type="hidden" name="isHeadOfFamily[]" value="0">
  <input type="checkbox" name="isHeadOfFamily[]" value="1">
</td>
<td>
  <input type="hidden" name="isEmployed[]" value="0">
  <input type="checkbox" name="isEmployed[]" value="1">
</td>

唯一需要注意的是，如果用户选中一个框，两个值都会被发送。因此，按照建议，如果未选中，请在提交时禁用隐藏。

$("#frm").submit(function(){
  $('input[type="checkbox"]:checked').prevAll().prop("disabled", true);
});