javascript - 复选框：具体描述如下：

Question

在同一个页面会有很多复选框，每个复选框里面都多选。
问题就是 我提交的时候，怎么知道 哪些值是在哪个复选框里面选出来的。

一个时间段 对应 一个复选框；
一个时间段 对应 一个复选框；
一个时间段 对应 一个复选框；

复选框里面的地址都是一样的，但是会因为时间段不一样选的不一样。。
在提交的时候怎么知道，那段时间对应哪些地址呢？？？
看图：

大体就是下图这样。。
提交的怎么把时间段和位置对应起来。
最好是 时间段和对应的位置 是一组存起来，或者是有什么更好的办法。。

Answer 1

可以在不同的时间段之间增加一个隐藏域。
比如你的图中：

1. 在第一行之前加入一个隐藏域，标志下面的数据是2016-11-01 11:49:19 ~ 2016-11-02 11:49:22的数据。

2. 在第一行和第二行中间加入一个隐藏域，标志下面的数据是2016-11-03 11:49:28 ~ 2016-11-05 11:49:33时间段内的数据。

后台读取的时候每次读取到一个隐藏域就知道接下去的数据是哪个时间段的了。

或者也可以在前台实现， 每个时间段用不同的标签分割开，标识符为时间段， 如:

<p data-period = "2016-11-01 11:49:19 ~ 2016-11-02 11:49:22">
    ...
</p>
<p data-period = "2016-11-03 11:49:28 ~ 2016-11-05 11:49:33">
    ...
</p>

然后在前端提交前先格式化好JSON再发送到后台。

又或者可以为每个复选框增加一个数据段标识是属于哪个时间段的， 前端在提交时序列化为JSON再发送到后台，这样的话每个数据都有自己的时间段标识。

Answer 2

谢邀，这种大表单分组的话，确实是一个比较恶心的点。

我的思路就比较的直接了，那就是约定！

直接约定name中的字段关键字。比如时间段1，直接约定两边的name都是以time-1-开头，然后后端会收到一大堆数据，按照key值的前缀进行分组，或者js直接先分组再传给后端。

举个例子，点击看代码和预览
https://jsfiddle.net/f69r8zbj/

---

更新一个js的序列化分组demo
https://jsfiddle.net/f69r8zbj/1/