复选框表单验证jQuery

Question

我有一个表单，用户可以在其中选择事件列表，每个事件都有开始时间作为类名。提交表单时，我需要检查用户是否选择了多个具有相同开始时间的事件。

例如在今天，如果用户选择了事件 A 和事件 C，它将触发验证消息。

<form>

<h3>Today</h3>

    <input type="checkbox" name="date" class="starttime-1730" value="A" />Event A
    <input type="checkbox" name="date" class="starttime-1600" value="B" />Event B
    <input type="checkbox" name="date" class="starttime-1730" value="C" />Event C
    <input type="checkbox" name="date" class="starttime-1630" value="D" />Event D


<h3>Tomorrow</h3> 

    <input type="checkbox" name="date" class="starttime-1830" value="A" />Event A
    <input type="checkbox" name="date" class="starttime-1830" value="B" />Event B
    <input type="checkbox" name="date" class="starttime-1930" value="C" />Event C
    <input type="checkbox" name="date" class="starttime-2030" value="D" />Event D

<input type="submit" name="submit" />

</form>

Answer 1

首先，将开始时间放在数据属性中，而不是类中（这不是类的用途）。例如：

<input type="checkbox" name="date" data-starttime="1730" value="A" />Event A

接下来将这两天放入一个字段集中，以便您可以使用相同的函数检查它们：

<form id="form1">
<fieldset>
<caption>Today</caption>

    <input type="checkbox" name="date" data-starttime="1730" value="A" />Event A
    <input type="checkbox" name="date" data-starttime="1600" value="B" />Event B
    <input type="checkbox" name="date" data-starttime="1730" value="C" />Event C
    <input type="checkbox" name="date" data-starttime="1630" value="D" />Event D
</fieldset>
<fieldset>
<caption>Tomorrow</caption> 

    <input type="checkbox" name="date" data-starttime="1830" value="A" />Event A
    <input type="checkbox" name="date" data-starttime="1830" value="B" />Event B
    <input type="checkbox" name="date" data-starttime="1930" value="C" />Event C
    <input type="checkbox" name="date" data-starttime="2030" value="D" />Event D
</fieldset>
<input type="submit" name="submit" />
</form>

这是用于匹配的 jQuery 函数。它尚未经过测试。

function submit(){
  $("#form1 fieldset").each(function(i){
    var hashmap = {};
    $("input:checked", $(i)).each(function(j){
      var mytime = $(j).data("starttime");
      if(hashmap[mytime] != undefined){
        //Collision, report it or something
      }else{
        hashmap[mytime] = 1;
      }
    });
  });
}