javascript - 如何发布多个复选框列表并处理它们？

Question

我的应用程序将用户的电话号码作为输入并将其存储在数据库中。在单独的页面上，我们要求用户检查其他用户应该可见的电话号码。请不要询问我们为什么要这样做，因为这样做是出于一些与此问题无关的商业原因。

现在，我尝试显示这些电话号码，并要求用户检查那些应该可见的电话号码或取消选中他之前检查过的电话号码。我有以下 Unresolved 问题:

1. 当用户提交表单时，我不知道他的电话号码是什么。如何将复选框与电话号码关联？
2. 如果我使用隐藏字段，将这些输入字段及其对应的电话号码作为 ID 是否是标准做法？

Answer 1

假设没有重复的电话号码，最简单的方法是将每个复选框的值设置为其关联的电话号码:

0262543210 <input type="checkbox" name="makeVisible" value="0262543210">
0265511223 <input type="checkbox" name="makeVisible" value="0265511223">
0398123456 <input type="checkbox" name="makeVisible" value="0398123456">

(显然你会添加某种格式，表格或无序列表或其他东西。)

然后在您的服务器端代码中处理每个 makeVisible (或您指定的任何名称)值，请记住仅提交已检查的值。此方法不需要 JavaScript。

如果您想为每个数字提交是/否或真/假(可见/隐藏)值，则 no-JS 方法就是仅使用单选按钮。但使用复选框最简单的方法可能是根据复选框状态设置隐藏字段:

<table>
  <tr>
    <th>Phone Number</th>
    <th>Make visible?</th>
  </tr>
  <tr>
    <td>0262543210</tr>
    <td>
       <input type="hidden" name="number" value="0262543210">
       <input type="hidden" name="makeVisible">
       <input type="checkbox" class="numbervisibility">
    </td>
  </tr>
  <tr>
    <td>0265511223</tr>
    <td>
       <input type="hidden" name="number" value="0265511223">
       <input type="hidden" name="makeVisible">
       <input type="checkbox" class="numbervisibility">
    </td>
  </tr>
  <!-- etc. -->
</table>

如果需要，添加带有记录 ID 的其他隐藏字段，或使用记录 ID 代替电话号码 - 任何适合您的数据结构的内容。

然后使用一些简单的 jQuery 在复选框更改时设置隐藏值:

$(".numbervisibility").click(function() {
    $(this).closest("td").find('input[name="makeVisible"]').val(this.checked ? "Y" : "N");
});

这样，在服务器端，您最终会得到匹配的字段数组以及数字和关联的可见性设置。

请注意，如果您使用 PHP，则应在末尾使用 [] 命名重复字段，例如 "makeVisible[]"。

(当然，在任一解决方案中，您都可以使用服务器端代码将电话号码注入(inject) html 中。)