选择1个收音机时,请检查所有其他人的值

时间:2013-11-22 21:59:58

标签: jquery radio-button

我有一堆收音机。这是他们的代码:

        <div class="question">18 years old or older?</div>
        <div class="radios">
        <input type="radio" name="age" value="yes"> Yes &nbsp;
        <input type="radio" name="age" value="no"> No
        <div class="tooltip"><span>Sorry, you must be 18 years old or older.</span></div>
        </div>

        <div style="clear: both;"></div>

        <div class="question">Earn $1,600 or more each month?</div>
        <div class="radios">
        <input type="radio" name="earn" value="yes"> Yes &nbsp;
        <input type="radio" name="earn" value="no"> No
        <div class="tooltip"><span>Sorry, you must earn $1,600 or more each month.</span></div>
        </div>

        <div style="clear: both;"></div>

        <div class="question">Stable in your job and residence?</div>
        <div class="radios">
        <input type="radio" name="stable" value="yes"> Yes &nbsp;
        <input type="radio" name="stable" value="no"> No
        <div class="tooltip"><span>Sorry, you must be stable in your job and residence.</span></div>
        </div>

        <div style="clear: both;"></div>

        <div class="question">No reposessions within 1 year?</div>
        <div class="radios">
        <input type="radio" name="repo" value="yes"> Yes &nbsp;
        <input type="radio" name="repo" value="no"> No
        <div class="tooltip"><span>Sorry, you must have no reposessions within 1 year.</span></div>
        </div>

        <div style="clear: both;"></div>

当有人点击任何这些无线电时,我希望它检查所有无线电值是否为“是”。

如果他们是,我希望它提醒“一切都好!”

继承我的代码无效:

$('.radios input').mousedown(function () {
    if ($(this).val() == 'no')
        $(this).closest('.radios').find('.tooltip').show();
    else
        $(this).closest('.radios').find('.tooltip').hide();

    $yescount = 0;

    $('.radios input').each(function () {
        if ($(this).val() == 'yes')
            $yescount += 1;
    });

    if ($yescount == 4)
        alert('all yes');
});

任何帮助都会很棒。

即使并非所有无线电都设置为“是”,它似乎也会发出警报。

4 个答案:

答案 0 :(得分:3)

使用:

$('.radios input').click(function () {
    if($('input[type=radio][value="yes"]:checked').length==$('input[type=radio][value="yes"]').length) alert('yes');
});

<强> jsFiddle example

答案 1 :(得分:1)

DEMO

$('.radios :radio').change(function () {
    if ($(this).val() == 'no')
        $(this).closest('.radios').find('.tooltip').show();
    else
        $(this).closest('.radios').find('.tooltip').hide();

    $yescount = 0;

    $('.radios :radio:checked').each(function () {
        if ($(this).val() == 'yes')
            $yescount += 1;
    });

    if ($yescount == 4)
        alert('all yes');
});

有用的选择器:
:radio - 仅针对单选按钮,而不是所有其他input的目标 :checked - 只需获取所选内容的值

答案 2 :(得分:0)

以下是对您的代码的一些调整,现在可以正常工作。

$('.radios input').change(function () {
    if ($(this).val() == 'no')
        $(this).closest('.radios').find('.tooltip').show();
    else
        $(this).closest('.radios').find('.tooltip').hide();

    $yescount = 0;

    $('.radios input').each(function () {
        if ($(this).is(':checked'))
            $yescount += 1;
    });

    if ($yescount == 4)
        alert('all yes');
});

“mousedown”几乎不是一个好主意,它改变了“变化”。 如果“$(this).val()”将始终返回yes,则应检查是否已选中。

Demo

答案 3 :(得分:0)

这是我的回答...... http://jsfiddle.net/8JRG5/

$("input[type=radio]").on('change',function() {
    var checked = new Array();  
    var all_yes = true;
    $("input:radio").each( function() {
        var name = $(this).attr("name"); 
        var val = $("input:radio[name='"+name+"']:checked").val();
        checked[name] = val; 
        if (val!=='yes') { all_yes = false; }  
  });

  console.log('all_yes = ' + all_yes);
  console.log(checked); 
});