Javascript jquery：如何检查是否选择了 div 中的所有单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6920606/
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
jquery: how to check if all radio buttons in a div are selected
提问by trrrrrrm
my html looks like this
我的 html 看起来像这样
<div id="div1">
<input type="radio" name="r1" value="v1" />
<input type="radio" name="r1" value="v2" />
<input type="radio" name="r1" value="v3" />
<input type="radio" name="r2" value="v1" />
<input type="radio" name="r2" value="v2" />
<input type="radio" name="r2" value="v3" />
<input type="radio" name="r3" value="v1" />
<input type="radio" name="r3" value="v2" />
<input type="radio" name="r3" value="v3" />
</div>
radio buttons are dynamically generated on my html so in that div i don't know how many radio buttons i have.
单选按钮是在我的 html 上动态生成的，所以在那个 div 中我不知道我有多少个单选按钮。
i want to make sure that the user will select a value for each one of them before he submits the form, how can i check that all radio buttons inside my div has a value checked?
我想确保用户在提交表单之前会为他们中的每一个选择一个值，我如何检查我的 div 中的所有单选按钮是否都选中了一个值？
Thank you
谢谢
回答by karim79
$(":radio").change(function() {
var names = {};
$(':radio').each(function() {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function() {
count++;
});
if ($(':radio:checked').length === count) {
alert("all answered");
}
}).change();
回答by Bennett McElwee
Restructure your HTML slightly- wrap each radio group in (say) a div. Then you can just do something like this to validate the form when the user submits it:
稍微重组您的 HTML- 将每个无线电组包装在（比如）一个 div 中。然后你可以做这样的事情来在用户提交表单时验证表单：
if ($('div:not(:has(:radio:checked))').length) {
alert("At least one group is blank");
}
Of course this can be tweaked in various ways to suit your HTML. The idea was from Find all radio groups which haven't been selected
当然，这可以通过各种方式进行调整以适合您的 HTML。这个想法来自查找所有尚未选择的广播组
回答by Carls Jr.
Solution herehttp://jsfiddle.net/QxdnZ/1/
这里的解决方案http://jsfiddle.net/QxdnZ/1/
var checked = $("#div1 :radio:checked");
var groups = [];
$("#div1 :radio").each(function() {
if (groups.indexOf(this.name) < 0) {
groups.push(this.name);
}
});
if (groups.length == checked.length) {
alert('all are checked!');
}
else {
var total = groups.length - checked.length;
var a = total>1?' groups are ':' group is ';
alert(total + a + 'not selected');
}
回答by Bennett McElwee
Validate the form when the user submits it, using this validation code.
使用此验证代码在用户提交表单时验证表单。
var blank = false;
$("input:radio").each(function() {
var val = $('input:radio[name=' + this.name + ']:checked').val();
if (val === undefined) {
blank = true;
return false;
}
});
alert(blank ? "At least one group is blank" : "All groups are checked");
First we get the names of all the radio button groups, then check that each one has a value. (Actually we're doing multiple checks, but that doesn't really matter.)
首先我们获取所有单选按钮组的名称，然后检查每个单选按钮组是否都有一个值。（实际上我们正在做多项检查，但这并不重要。）
回答by ingo
Looking for something along these lines? http://jsfiddle.net/gXsZp/3/
寻找沿着这些路线的东西？http://jsfiddle.net/gXsZp/3/
<div id="div1">
Q1
<input type="radio" name="r1" value="v1" />
<input type="radio" name="r1" value="v2" />
<input type="radio" name="r1" value="v3" />
<br/>Q2
<input type="radio" name="r2" value="v1" />
<input type="radio" name="r2" value="v2" />
<input type="radio" name="r2" value="v3" />
<br/>Q3
<input type="radio" name="r3" value="v1" />
<input type="radio" name="r3" value="v2" />
<input type="radio" name="r3" value="v3" />
</div>
<br/>
<input id="btn" type="submit" text="submit"/>
$('#btn').click(function(){
if ( $('#div1 input:radio:checked').size() == 3 )
return true;
return false;
});
回答by zhzhzhh
Try this:
尝试这个：
function check(){
var allCheck = true;
if($("#div1 :radio:checked").length==0){
allCheck=false;
}
$("#div1 :radio").each(function(){
for(var i=0;i<$("#div1 :radio:checked").length;i++)
if($(this).attr("name")===$($("#div1 :radio:checked")[i]).attr("name"))
break;
else if(i==$("#div1 :radio:checked").length-1)
allCheck = false;
});
return allCheck;
}
回答by o q
Try this one:
试试这个：
$('input:radio', $('#div1')).each(function() {
if(name && name == $(this).attr('name'))
return true; // Skip when checking the same element name.
name = $(this).attr('name');
if(! $('input:radio[name="' + name + '"]:checked').length) {
alert('Oops, you missed some input there.. [' + name + ']');
return false;
}
});
It will loop through every radio button to check for checked radio & will break as soon it found non-checked radio group (first error found). But if you prefer to get all the errors (not only the first error found), just remove return false.
它将循环遍历每个单选按钮以检查已检查的无线电，一旦发现未检查的无线电组（发现第一个错误）就会中断。但是，如果您希望获得所有错误（不仅是找到的第一个错误），只需删除return false.
回答by Freddie
This will work:
这将起作用：
if($("#div1").children("input:radio:checked").size() == 3)
{
alert('three inputs were checked');
}
