假设我有以下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>
如何编写JavaScript
函数以确保至少选择了一个无线电输入?
答案 0 :(得分:40)
这样的事情可以解决问题
if ($("input[type=radio]:checked").length > 0) {
// Do your stuff here
}
<强>更新强> 没有看到它不应该有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;
}
答案 1 :(得分:11)
如果目标浏览器支持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>
请注意,在chrome中,您只需将required
放在其中一个输入上。我不确定其他浏览器会做什么。
除了javascript验证(如选定的答案)之外,我通常会这样做,因此也支持html 4浏览器。
答案 2 :(得分:8)
循环<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;
}
答案 3 :(得分:3)
我这样解决了。
if(document.querySelector('input[name="choice"]:checked') == null) {
window.alert("You need to choose an option!");
}
答案 4 :(得分:2)
由于您说您需要知道'至少选择了一个输入',您可能需要复选框而不是单选按钮。 (您只能从一组共享name
值的单选按钮中一次选择一个单选按钮。)
你应该放弃font
标签并稍微更新你的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 强>
label { font-size: 1.5em; }
.blue { color: #0033CC; }
.red { color: #CC0000; }
.purple { color: #660033; }
<强>的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;
}
答案 5 :(得分:0)
询问问题以寻求JS
解决方案。但是,这是使用HTML
完成此操作的一个非常简单的技巧。您只需在required
中使用HTML input tag
关键字即可。
示例代码
<input type="radio" name="gender" value="male" required>Male<br>
<input type="radio" name="gender" value="female">Female
您的表单
请注意,您只需为整个广播组提及一次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>