javascript 需要从一组复选框中选中一个复选框答案

【问题标题】：javascript require a checkbox to be checked from an array of checkboxesjavascript 需要从一组复选框中选中一个复选框
【发布时间】：2012-05-31 15:10:05
【问题描述】：

我目前有一些 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' />

谢谢。

【问题讨论】：

请张贴提交表单的代码。您可能只需要在提交后隐藏错误。比如：$(".error").hide()
拥有多个具有相同 id 的元素是无效的 HTML，最好将控件放在其标签内（因此单击标签会检查控件）最后，不要使用HTML 元素的 XML 标记。

标签： javascript checkbox

【解决方案1】：

您命名和标识复选框的方式，它们不会属于同一组，也不会被正确识别。

页面上的每个元素在被识别时都必须具有唯一的 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

希望对你有帮助

【讨论】：

对不起，id 是我的错误。我确实有具有唯一名称的 ID，就像我的标签名称一样。
哦天哪工作完美！！！！！！！！！！！！谢谢！代码也很短！我所做的唯一更改是 name= 到 class=

【解决方案2】：

从技术上讲，您的 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 中的工作代码。

【讨论】：