Подтвердить что ты не робот

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 имеют значение?

Спасибо

4b9b3361

Ответ 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'); 
}