javascript需要从复选框数组中选中一个复选框

时间:2012-05-25 01:58:10

标签: javascript checkbox

我当前有一些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;
    }

HTML代码:

 <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' />

谢谢。

2 个答案:

答案 0 :(得分:2)

您拥有已命名和标识的复选框的方式,它们将不属于同一组,并且无法正确识别它们。

页面上的每个元素在被识别时必须具有唯一的ID,并且对于一组复选框或单选按钮,要作为一组进行验证和传递,该组的每个成员必须具有相同的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;
}

Reference for selector format

如果那个选择器仍然给你带来麻烦,那么你可能需要在方括号前面添加双反斜杠,如下所示:

if($('input:checkbox[name="hobbies\\[\\]"]:checked').length === 0){

Reference for double backslashes

希望这有帮助

答案 1 :(得分:1)

从技术上讲,您的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]);

以上是这个想法; this fiddle中的工作代码。