JavaScript 需要从复选框数组中选中一个复选框
javascript require a checkbox to be checked from an array of checkboxes
我目前有一些javascript/jquery代码,如果没有选中任何框,就会显示错误消息。但是,当我选中一个框并提交表单时,仍然显示错误消息。
任何帮助都会很棒!
JavaScript代码:
var hobbies = $('#hobbies').val();
if ($('#hobbies :checkbox:checked').length === 0){
$("#multichk").after('<span class="error">Please choose at least one.</span>');
hasError = true;
}
网页代码:
<input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br />
<input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br />
<input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br />
<input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br />
<input type='hidden' id='multichk' />
谢谢。
您命名和标识复选框的方式,它们不会属于同一组,也不会正确标识。
页面上的每个元素在标识时都必须具有唯一的 ID,并且要验证一组复选框或单选按钮并作为一个组传递,组的每个成员必须具有相同的名称。
鉴于这些规则,标签标签的 for
属性引用元素的id
属性而不是其name
属性也就不足为奇了。
现在,我猜你正在使用PHP作为你的服务器端语言(基于复选框名称中的括号),在这种情况下,复选框应该像这样声明:
<input type='checkbox' id='hobbies0' name='hobbies[]' value='1'/>
<label for='hobbies0'>football</label><br />
<input type='checkbox' id='hobbies1' name='hobbies[]' value='2'/>
<label for='hobbies1'>soccer</label><br />
<input type='checkbox' id='hobbies2' name='hobbies[]' value='3'/>
<label for='hobbies2'>baseball</label><br />
<input type='checkbox' id='hobbies3' name='hobbies[]' value='4'/>
<label for='hobbies3'>tennis</label><br />
[注意:标签仅移动到下一行以删除代码框中的水平滚动]
随着HTML的整理,jQuery看起来像这样:
if($('input:checkbox[name="hobbies[]"]:checked').length === 0){
$("#multichk").after('<span class="error">Please choose at least one.</span>');
hasError = true;
}
选择器格式参考
如果该选择器仍然给您带来麻烦,那么您可能需要在方括号前面加上双反斜杠,如下所示:
if($('input:checkbox[name="hobbies''['']"]:checked').length === 0){
双反斜杠的参考
希望这有帮助
从技术上讲,您的 HTML 是无效的;具有相同 id 的多个元素是非法的。 您应该使用类选择器而不是 id 选择器...
无论如何,最简单的方法是将跨度放在那里,并在有人选中复选框时将其清除。
<input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br />
<input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br />
<input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br />
<input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br />
<input type='hidden' id='multichk' />
<span id="error_message" class="error"></span>
然后你的js:
var hobbies = $('#hobbies').val();
if ($('#hobbies:checked').length === 0) {
$('#error_message').innerHTML('Please choose at least one.');
hasError = true;
} else {
$('#error_message').innerHTML('');
hasError = false;
}
每当他们单击复选框时,您都可以通过设置处理程序来重置它:
function changed(checkbox) {
return function() {
if (checkbox.checked) {
$('#error_message').innerHTML('');
hasError = false;
}
}
}
var checkboxes = document.querySelector('#hobbies')
for (var i=0; i<checkboxes.length; ++i) {
checkboxes[i].onchange = changed(checkboxes[i]);
以上是这个想法;在这个小提琴中工作代码。
相关文章:
- 复选框:一次只允许单击一个复选框
- jquery从2个json字符串构建一个复选框表单
- 聚合物铁形式验证至少选中一个复选框
- 我有多个复选框,并希望为其中 2 个制定规则,以便如果我选择 1 个,则无法选择另一个
- 如何从多个复选框中获取最后一个值
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- 在单击一个或多个复选框的同时调用iframe
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 复选框一次选中一个不在gridview中工作
- 如果选中了以下复选框,请选中上一个复选框
- 复选框一次选中一个不起作用
- 如何创建一个新的<李>带有复选框或<a>在里面
- 在一组复选框中,一次只允许选择一个
- 如何通过jQuery选中所有复选框并在单击一个复选框时取消选择
- 如何发现至少有一个复选框被选中或没有使用javascript
- 在mvc4中选择另一个复选框时禁用复选框
- 导航到另一个页面后,复选框状态会更改
- Javascript选中一个表中的所有复选框,该表的行具有样式显示标记
- 在服务器上创建一个复选框,使用 javascript 处理函数
- 选择一个从 mysql 返回选中/未选中复选框的对象