[英]checking if at least one radio button has been selected - JavaScript
Supposed I had the following HTML
form:假设我有以下
HTML
表单:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Choose</title>
</head>
<body>
<form method="post" enctype="application/x-www-form-urlencoded">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
How can I write a JavaScript
function to make sure at least one radio input has been selected?如何编写
JavaScript
函数以确保至少选择了一个收音机输入?
Something like this should do the trick像这样的事情应该可以解决问题
if ($("input[type=radio]:checked").length > 0) {
// Do your stuff here
}
UPDATE Did not see that it's not supposed to have jQuery, so here's an alternative function to check that in pure JS更新没有看到它不应该有 jQuery,所以这里有一个替代函数来检查纯 JS
function check(){
var radios = document.getElementsByName("choice");
for (var i = 0, len = radios.length; i < len; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}
This is possible to do without javascript if your targeted browsers support the HTML5 required attribute.如果您的目标浏览器支持HTML5 required属性,则无需 javascript 即可完成此操作。
<input type="radio" name="choose" value="psychology" required>
<input type="radio" name="choose" value="geography" required>
<input type="radio" name="choose" value="gastronomy" required>
Note that in chrome you only need to put required
on one of the inputs.请注意,在 chrome 中,您只需要将
required
放在其中一个输入上。 I am not sure what other browsers do.我不确定其他浏览器会做什么。
I usually do this in addition to a javascript validation (like the selected answers) so that html 4 browsers are supported as well.除了 javascript 验证(如所选答案)之外,我通常还会这样做,以便也支持 html 4 浏览器。
Looping over the <input>
tags, check the type and if it is checked.循环遍历
<input>
标签,检查类型以及是否被选中。
function isOneChecked() {
// All <input> tags...
var chx = document.getElementsByTagName('input');
for (var i=0; i<chx.length; i++) {
// If you have more than one radio group, also check the name attribute
// for the one you want as in && chx[i].name == 'choose'
// Return true from the function on first match of a checked item
if (chx[i].type == 'radio' && chx[i].checked) {
return true;
}
}
// End of the loop, return false
return false;
}
I solved it this way.我是这样解决的。
if(document.querySelector('input[name="choice"]:checked') == null) {
window.alert("You need to choose an option!");
}
Since you said you needed to know if 'at least one input is selected', you probably want checkboxes rather than radio buttons.由于您说您需要知道是否“至少选择了一个输入”,因此您可能需要复选框而不是单选按钮。 (You can only select one radio button at a time from a group of radio buttons that share a
name
value.) (您一次只能从一组共享
name
值的单选按钮中选择一个单选按钮。)
You should probably drop the font
tags and update your HTML a little bit too:您可能应该删除
font
标签并稍微更新您的 HTML:
HTML HTML
<h1>Choose</h1>
<div>
<input type="checkbox" id="ckb-psychology" name="choose" value="psychology">
<label for="ckb-psychology" class="blue">Instant Psychology</label>
</div>
<div>
<input type="checkbox" id="ckb-geography" name="choose" value="geography">
<label for="ckb-geography" class="red">Instant Geography</label>
</div>
<div>
<input type="checkbox" id="ckb-gastronomy" name="choose" value="gastronomy">
<label for="ckb-gastronomy" class="purple">Instant Gastronomy</label>
</div>
<input type="submit" name="Submit" value="Go">
CSS CSS
label { font-size: 1.5em; }
.blue { color: #0033CC; }
.red { color: #CC0000; }
.purple { color: #660033; }
JavaScript JavaScript
function isOneChecked ( name ) {
var checkboxes = document.getElementsByName( name ),
i = checkboxes.length - 1;
for ( ; i > -1 ; i-- ) {
if ( checkboxes[i].checked ) { return true; }
}
return false;
}
The question is asked for a JS
solution.该问题要求
JS
解决方案。 However, here's a very simple trick to get this done using HTML
.但是,这里有一个非常简单的技巧可以使用
HTML
完成此操作。 You can simply use the required
keyword in the HTML input tag
.您可以简单地在
HTML input tag
使用required
关键字。
Sample code示例代码
<input type="radio" name="gender" value="male" required>Male<br>
<input type="radio" name="gender" value="female">Female
Your form你的表格
Please note that you only need to mention the required
keyword once for the entire radio-group.请注意,您只需为整个无线电组提及一次
required
关键字。
<form method="post" enctype="application/x-www-form-urlencoded">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology" required><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.