如何发布多个复选框列表并进行处理?

时间:2013-01-27 23:52:53

标签: javascript jquery html

我的应用程序将用户的电话号码作为输入并将其存储在数据库中。在单独的页面上,我们要求用户检查其他用户应该看到的那些电话号码。请不要对我们为什么这样做提出任何问题,因为出于某些与此问题无关的商业原因,我们会这样做。

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

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

2 个答案:

答案 0 :(得分: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。

如果你想为每个数字提交yes / no或true / false(可见/隐藏)值,那么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[]"

(当然,在任何一种解决方案中,您都会使用服务器端代码将电话号码注入html。)

答案 1 :(得分:0)

当您提交页面时,您肯定会将数据作为PhoneNumber / Show对的集合发送到您的后端处理代码(无论是什么平台),并在此基础上将它们创建到数据库中(但是你这样做),根据给定的一对数据设置显示标志。

即在jquery中(假设您没有使用类似于敲门的数据绑定框架,我建议您这样做)当用户单击提交按钮时,您需要$()。每个容纳所有容器的容器CheckBox /电话号码元素并构造一些JSON来发送如下:

{
   UserID:xxx,
  [{PhoneNumber:12345,Show:true},
  {PhoneNumber:999,Show:false}]
}

然后发送,但通常发送数据

然后在服务器端,你有一个相应的类来接收这个信息,循环它并做任何需要在数据库中完成的事情,如果它不存在就创建它,如果它存在就更新它,等等

或者我错过了什么?您能否在平台上提供更多信息,应用程序如何呈现页面(本机,html5),当前如何将数据发送到服务器等等?