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

javascript需要从复选框数组中选中复选框,javascript,checkbox,Javascript,Checkbox,我现在有一些javascript/jquery代码,如果没有复选框,它会显示一条错误消息。但是,当我选中一个框并提交表单时,仍然会显示错误消息 任何帮助都会很好 javascript代码: var hobbies = $('#hobbies').val(); if ($('#hobbies :checkbox:checked').length === 0){ $("#multichk").after('<span class="error">Please ch

我现在有一些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;
    }
var嗜好=$('#嗜好').val();
如果($('#爱好:复选框:选中')。长度==0){
$(“#multichk”)。在('请至少选择一个')之后;
hasrerror=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' />
football
足球
棒球
网球

谢谢。

从技术上讲,您的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>
您可以通过设置处理程序,在他们单击复选框时重置该复选框:

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]);
功能已更改(复选框){
返回函数(){
如果(复选框。选中){
$(“#错误消息”).innerHTML(“”);
hasError=false;
}
}
}
var复选框=document.querySelector(“#嗜好”)

对于(var i=0;i从技术上讲,您的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>
您可以通过设置处理程序,在他们单击复选框时重置该复选框:

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]);
功能已更改(复选框){
返回函数(){
如果(复选框。选中){
$(“#错误消息”).innerHTML(“”);
hasError=false;
}
}
}
var复选框=document.querySelector(“#嗜好”)

对于(var i=0;i您命名和标识复选框的方式,它们不会属于同一组,也不会被正确标识

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


希望这对您命名和标识复选框的方式有所帮助,它们不会属于同一组,也不会被正确标识

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


希望这对您有所帮助

请发布提交表单的代码。您可能只需要在提交表单后隐藏错误。例如:
$(“.error”).hide()
具有相同id的多个元素不是有效的HTML,最好将控件放在其标签内(因此单击标签检查控件)最后,不要对HTML元素使用XML标记。请发布提交表单的代码。您可能只需要在提交后隐藏错误。例如:
$(“.error”).hide()
具有相同id的多个元素不是有效的HTML,最好将控件放在其标签内(因此,单击标签将检查控件)最后,不要对HTML元素使用XML标记。很抱歉,id是我的一个错误。我的id有唯一的名称,就像我的标签名一样。哦,geeze工作得很好!!!!!!!!!!!!!!!!!!!!!谢谢!代码也很短!我唯一做的更改是name=改为class=对不起,id是我的一个错误。我确实有唯一的id,只是like我的标签名称。哦,geeze工作完美!!!!!!!!!!!!!谢谢!代码也很短!我唯一做的更改是name=到class=