2017-02-17 111 views
0

我使用HTML5验证功能制作表单。检查是否至少有一个复选框使用HTML5进行检查

实施例:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Form Test</title> 
</head> 
<body> 
    <form id="form1" method="post" action=""> 
     <label><input type="checkbox" name="color1" value="1" required />Green</label><br /> 
     <label><input type="checkbox" name="color2" value="2" required />Red</label><br /> 
     <label><input type="checkbox" name="color3" value="3" required />Yellow</label><br /> 
     <label><input type="checkbox" name="color4" value="4" required />Blue</label><br /> 
     <input type="submit" /><input type="reset" /> 
    </form> 
</body> 
</html> 

我需要,如果至少一个复选框被选中它来验证。

“必须至少选中一个复选框。”

我找到答案在这里:
Jquery - check if at least one checkbox is checked
Check if at least one checkbox is checked using jQuery
Making sure at least one checkbox is checked
Submit form only if at least one checkbox is checked

但使用JavaScript,jQuery和等

只使用HTML5可以化妆?

+0

用户必须做出选择,对不对?那么,您的应用程序将如何通知没有javascript的用户选择或将数据发送到服务器进行验证?所以,是的,我认为这是不可能的... – mickdev

+0

如果你可以移动标签之外的输入,你可以在这里试试我的答案:http://stackoverflow.com/a/33842776/3903374 –

+0

@RickHitchcock,我会考虑用你的解决方案。非常感谢你。 :-D – Dadeke

回答

0

这是不可能的。你必须通过JS绑定一个函数来检查它是否为onchange,这个函数计算被选中的复选框的数量。复选框的required属性要求检查所有这些属性(对于无线电属性,只需要检查一个值)。

0

尝试下面的代码.......

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Form Test</title> 
 
</head> 
 
<body> 
 
    <form id="form1" method="post" action=""> 
 
     <label><input type="radio" name="color1" value="1" checked />Green</label><br /> 
 
     <label><input type="radio" name="color1" value="2" required />Red</label><br /> 
 
     <label><input type="radio" name="color1" value="3" required />Yellow</label><br /> 
 
     <label><input type="radio" name="color1" value="4" required />Blue</label><br /> 
 
     <input type="submit" /><input type="reset"/> 
 
    </form> 
 
</body> 
 
</html>

相关问题