背景资料
我有一个表格，每行代表联系信息。 没有必要拥有联系人数据，但如果用户指定了分机号码，他们必须为每个字段指定数据。
问题
我到目前为止检查大多数字段的代码都在工作..但我有一组代表一周中某一天的复选框。必须至少选择一天。 代码现在失败了...即使我选择了一个复选框，我也会收到错误。
此外，我想知道是否有办法简化检查复选框状态的IF语句。 代码非常冗长......而且丑陋。
HTML
<table class="table table-bordered table-hover tcdata">
<tbody><tr><td colspan="6"><h3>Time Conditions</h3></td></tr>
<tr><td colspan="6">Default Rule:</td></tr>
<tr id="time_conditions">
<td><input class="form-control starttc tcdata" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime" id="starttime"></td>
<td><input class="form-control tcdata" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime" id="endtime"></td>
<td><input class="form-control tcdata" type="input" placeholder="Extension" name="extension" id="extension"></td>
<td><input class="form-control tcdata" type="input" placeholder="Domain" name="domain" id="domain"></td>
<td>
<label class="checkbox-inline"><b>Days of Week:</b></label>
<input class="checkbox-inline tcdata" type="checkbox" name="dow_m">Mon
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t">Tue
<input class="checkbox-inline tcdata" type="checkbox" name="dow_w">Wed
<input class="checkbox-inline tcdata" type="checkbox" name="dow_r">Thu
<input class="checkbox-inline tcdata" type="checkbox" name="dow_f">Fri
<input class="checkbox-inline tcdata" type="checkbox" name="dow_s">Sat
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t">Sun
</td>
<td><button id="addtc" type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i></button></td>
</tr>
<tr class="showAdditionalRulesLabel" style=""><td colspan="6">Addtional Rules:</td></tr>
<tr>
<td><input class="form-control starttc tcdata" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime2"></td>
<td><input class="form-control tcdata" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime2"></td>
<td><input class="form-control tcdata" type="input" placeholder="Extension" name="extension2"></td>
<td><input class="form-control tcdata" type="input" placeholder="Domain" name="domain2"></td>
<td colspan="2"><label class="checkbox-inline"><b>Days of Week:</b></label><input class="checkbox-inline tcdata" type="checkbox" name="dow_m2">Mon <input class="checkbox-inline tcdata" type="checkbox" name="dow_t2">Tue <input class="checkbox-inline tcdata" type="checkbox" name="dow_w2">Wed <input class="checkbox-inline tcdata" type="checkbox" name="dow_r2">Thu <input class="checkbox-inline tcdata" type="checkbox" name="dow_f2">Fri <input class="checkbox-inline tcdata" type="checkbox" name="dow_s2">Sat <input class="checkbox-inline tcdata" type="checkbox" name="dow_n2">Sun
</td></tr>
<tr id="submitbtnsection"><td colspan="6"><input type="submit" name="submit" id="submit" class="btn btn-primary" value="Assign"></td></tr>
</tbody>
</table>
以下是他们尝试提交表单时调用的javascript（部分）：
$('.tcdata tr').each(function (i, row) {
var $row = $(row);
var $ext = $row.find('input[name*="extension"]');
if ($ext.val()) {
//extension data has been defined.. make sure you have start time / end time
var $start = $row.find('input[name*="starttime"]');
var $end = $row.find('input[name*="endtime"]');
var $domain = $row.find('input[name*="domain"]');
if ( !$start.val() || !$end.val() || !$domain.val() ) {
$(".btn-warning").html("Whoops! Every time condition must have a start / end time, and a domain");
e.preventDefault();
return;
}
//check days of week.
var $dow_m = $row.find('input[name*="dow_m"]');
var $dow_t = $row.find('input[name*="dow_t"]');
var $dow_w = $row.find('input[name*="dow_w"]');
var $dow_r = $row.find('input[name*="dow_r"]');
var $dow_f = $row.find('input[name*="dow_f"]');
var $dow_s = $row.find('input[name*="dow_s"]');
var $dow_s = $row.find('input[name*="dow_n"]');
if ( (!$("#dow_m").is(':checked')) && (!$("#dow_t").is(':checked')) && (!$("#dow_w").is(':checked')) && (!$("#dow_r").is(':checked')) && (!$("#dow_f").is(':checked')) && (!$("#dow_s").is(':checked')) && (!$("#dow_n").is(':checked')) ) {
//nothing selected
$(".btn-warning").html("Whoops! Every time condition must have a day of week assign to it");
e.preventDefault();
return;
}
}
});
另外一条评论 - 如果它有帮助...... 您会注意到，对于表格中的每一行，字段的名称都相同，只是末尾的数字会增加。例如：
name="dow_w"
name="dow_w2"
这些行是由jquery动态生成的...但我不认为它是相关的，所以我还没有包含代码。 您在上面看到的HTML代码是RENDERED html ...所以它非常准确。
任何帮助搞清楚我的错误在哪里都会受到赞赏。
答案 0 :(得分：0)
每个规则都由多个<tr>组成 - 因此循环遍历每个规则并不合理。而是使用<tr>将您的<tbody>集合分组并循环遍历多个<tbody>。
我认为输入具有相同名称的正确方法是追加[n]（其中n是一个数字）。这样，具有相同[n]的所有输入都被视为相关。
您希望具有相同名称的输入具有相似的样式。而不是使用ID，使用类。
我发现在最后使用[n]缓存元素的最简单方法是使用[name^=name] ^=表示“以...开头”。
您可以使用^=选择器和:checked的组合来获取已检查的日期。然后使用length属性来计算选择的数量。
HTML（1-3）
<table class="table table-bordered table-hover tcdata">
<tbody>
<tr>
<td colspan="6">
<h3>Time Conditions</h3></td>
</tr>
<tr>
<td colspan="6">Default Rule:</td>
</tr>
<tr id="time_conditions">
<td>
<input class="form-control starttc tcdata starttime" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime[0]">
</td>
<td>
<input class="form-control tcdata endtime" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime[0]">
</td>
<td>
<input class="form-control tcdata extension" type="input" placeholder="Extension" name="extension[0]">
</td>
<td>
<input class="form-control tcdata" type="input" placeholder="Domain" name="domain[0]" id="domain">
</td>
<td>
<label class="checkbox-inline"><b>Days of Week:</b></label>
<input class="checkbox-inline tcdata" type="checkbox" name="dow_m[0]">Mon
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t[0]">Tue
<input class="checkbox-inline tcdata" type="checkbox" name="dow_w[0]">Wed
<input class="checkbox-inline tcdata" type="checkbox" name="dow_r[0]">Thu
<input class="checkbox-inline tcdata" type="checkbox" name="dow_f[0]">Fri
<input class="checkbox-inline tcdata" type="checkbox" name="dow_s[0]">Sat
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t[0]">Sun
</td>
<td>
<button id="addtc" type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i></button>
</td>
</tr>
</tbody>
<tbody>
<tr class="showAdditionalRulesLabel" style="">
<td colspan="6">Addtional Rules:</td>
</tr>
<tr>
<td>
<input class="form-control starttc tcdata" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime[1]">
</td>
<td>
<input class="form-control tcdata" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime[1]">
</td>
<td>
<input class="form-control tcdata" type="input" placeholder="Extension" name="extension[1]">
</td>
<td>
<input class="form-control tcdata" type="input" placeholder="Domain" name="domain[1]">
</td>
<td colspan="2">
<label class="checkbox-inline"><b>Days of Week:</b></label>
<input class="checkbox-inline tcdata" type="checkbox" name="dow_m[1]">Mon
<input class="checkbox-inline tcdata" type="checkbox" name="dow_t[1]">Tue
<input class="checkbox-inline tcdata" type="checkbox" name="dow_w[1]">Wed
<input class="checkbox-inline tcdata" type="checkbox" name="dow_r[1]">Thu
<input class="checkbox-inline tcdata" type="checkbox" name="dow_f[1]">Fri
<input class="checkbox-inline tcdata" type="checkbox" name="dow_s[1]">Sat
<input class="checkbox-inline tcdata" type="checkbox" name="dow_n[1]">Sun
</td>
</tr>
<tr id="submitbtnsection">
<td colspan="6">
<input type="button" name="submit" id="submit" class="btn btn-primary" value="Assign">
</td>
</tr>
</tbody>
</table>
JavaScript（4-5）
$('.tcdata tbody').each(function() {
// $row is kinda misleading - better to say: $tbody
var $row = $(this);
// cleaner to store all the elements you need together
var $ext = $row.find('[name^="extension"]'),
$start = $row.find('[name^="starttime"]'),
$end = $row.find('[name^="endtime"]'),
$domain = $row.find('[name^="domain"]');
// check if the user specifies an extension number
if ($ext.val()) {
// they must specify data for every field
if (!$start.val() || !$end.val() || !$domain.val()) {
$warning.html("Whoops! Every time condition must have a start / end time, and a domain");
e.preventDefault();
return;
}
// and at least one day must be selected
if (!$row.find('[name^=dow_]:checked').length) {
$warning.html("Whoops! Every time condition must have a day of week assign to it");
e.preventDefault();
return;
}
}
});