Javascript javascript中的单选按钮验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10339073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio button validation in javascript
提问by MatuDuke
Need to validate a radio button input, i.e. when submit button is pressed and no radio buttons have been selected, it alerts the user saying 'please select a check box', and if a radio button has been selected then simply submit the form, needs no alert.
需要验证单选按钮输入，即当提交按钮被按下并且没有选择单选按钮时，它会提醒用户说“请选择一个复选框”，如果选择了一个单选按钮，那么只需提交表单，需要没有警报。
Can only use HTML CSS and JavaScript for this, I know it's 1000 times easier in jquery but sadly I can't use that.
只能为此使用 HTML CSS 和 JavaScript，我知道它在 jquery 中容易 1000 倍，但遗憾的是我不能使用它。
And I know my HTML isn't valid, but unless it directly affects my current problem then I'll handle it later.
而且我知道我的 HTML 无效，但除非它直接影响我当前的问题，否则我稍后会处理它。
<form name="form1" action="#" onsubmit="return validateForm()" method="post">
First time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="1" name="yesno" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="1" name="yesno" value="2"/>
<br/>
<input type="submit" value="Submit"><br/>
</form>
Any pointers are greatly appreciated, thanks.
任何指针都非常感谢，谢谢。
回答by MatuDuke
1st: If you know that your code isn't right, you should fix it before do anything!
第一：如果你知道你的代码不正确，你应该在做任何事情之前修复它！
You could do something like this:
你可以这样做：
function validateForm() {
var radios = document.getElementsByName("yesno");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (!formValid) alert("Must check some option!");
return formValid;
}?
See it in action: http://jsfiddle.net/FhgQS/
看到它在行动：http: //jsfiddle.net/FhgQS/
回答by Fernando
Full validation example with javascript:
使用 javascript 的完整验证示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio button: full validation example with javascript</title>
<script>
function send() {
var genders = document.getElementsByName("gender");
if (genders[0].checked == true) {
alert("Your gender is male");
} else if (genders[1].checked == true) {
alert("Your gender is female");
} else {
// no checked
var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
document.getElementById('msg').innerHTML = msg;
return false;
}
return true;
}
function reset_msg() {
document.getElementById('msg').innerHTML = '';
}
</script>
</head>
<body>
<form action="" method="POST">
<label>Gender:</label>
<br />
<input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
<br />
<input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
<br />
<div id="msg"></div>
<input type="submit" value="send>>" onclick="return send();" />
</form>
</body>
</html>
Regards,
问候，
Fernando
费尔南多
回答by Akash_Sahu
You could do something like this
你可以做这样的事情
var option=document.getElementsByName('Gender');
if (!(option[0].checked || option[1].checked)) {
alert("Please Select Your Gender");
return false;
}
回答by Chandresh
<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data">
<div class="text-input">
<label>Gender: </label>
<input class="form-control" type="radio" name="gender" id="male" value="male" />
<label for="male">Male</label>
<input class="form-control" type="radio" name="gender" id="female" value="female" />
<label for="female">Female</label>
</div>
<div class="text-input" align="center">
<input type="submit" name="register" value="Submit" onclick="return radioValidation();" />
</div>
</form>
<script type="text/javascript">
function radioValidation(){
var gender = document.getElementsByName('gender');
var genValue = false;
for(var i=0; i<gender.length;i++){
if(gender[i].checked == true){
genValue = true;
}
}
if(!genValue){
alert("Please Choose the gender");
return false;
}
}
</script>
Source: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html
来源：http: //chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html
回答by Jonathan Geisler
In addition to the Javascript solutions above, you can also use an HTML 5 solution by marking the radio buttons as required in the markup. This will eliminate the need for any Javascript and let the browser do the work for you.
除了上面的 Javascript 解决方案，您还可以通过在标记中根据需要标记单选按钮来使用 HTML 5 解决方案。这将消除对任何 Javascript 的需求，让浏览器为您完成工作。
See HTML5: How to use the "required" attribute with a "radio" input fieldfor more information on how to do this well.
请参阅HTML5：如何在“radio”输入字段中使用“required”属性，了解有关如何做好这件事的更多信息。
回答by Florian Margaine
document.forms[ 'forms1' ].onsubmit = function() {
return [].some.call( this.elements, function( el ) {
return el.type === 'radio' ? el.checked : false
} )
}
Just something out of my head. Not sure the code is working.
只是我脑子里的东西。不确定代码是否有效。
