Jquery: как проверить, выбраны ли все переключатели в div?
my 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>
переключатели динамически генерируются на моем html, поэтому в этом div я не знаю, сколько радиокнопдок у меня есть.
Я хочу убедиться, что пользователь выберет значение для каждого из них до того, как он представит форму, как я могу проверить, что все радиокнопки внутри моего div имеют значение?
Спасибо
Ответы
Ответ 1
Немного реструктурируйте свой HTML - оберните каждую группу радио в (скажем) div. Затем вы можете просто сделать что-то подобное, чтобы проверить форму, когда пользователь ее отправляет:
if ($('div:not(:has(:radio:checked))').length) {
alert("At least one group is blank");
}
Конечно, это может быть изменено различными способами в соответствии с вашим HTML. Идея взята из Найти все группы радиостанций, которые не были выбраны
Ответ 2
$(":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();
Демо: http://jsfiddle.net/yFaAj/15/
Ответ 3
Решение здесь 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');
}
Ответ 4
Подтвердите форму, когда пользователь отправит ее, используя этот код проверки.
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");
Сначала мы получаем имена всех групп переключателей, а затем проверяем, что у каждого есть значение. (На самом деле мы делаем несколько проверок, но это не имеет особого значения.)
Ответ 5
Попробуйте следующее:
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;
}
Ответ 6
Попробуйте следующее:
$('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;
}
});
Он будет прокручивать каждую радиокнопку, чтобы проверить установленную радиостанцию и сломаться, как только обнаружится неконтролируемая радиогруппа (обнаружена первая ошибка). Но если вы предпочитаете получать все ошибки (не только первая найденная ошибка), просто удалите return false
.
Ответ 7
Ищете что-то в этом направлении? 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;
});
Ответ 8
Это будет работать:
if($("#div1").children("input:radio:checked").size() == 3)
{
alert('three inputs were checked');
}