检查所有单选按钮以获取所选值

Question

我有一个问题清单。一次可以看到一个问题 - 其余的则隐藏起来 - 当您处理接下来要按的每个问题时。您也可以随时按下并更改答案。

我试图弄清楚到目前为止是否有任何问题被回答为否 - 如果他们已经展示了这个项目。否则显示另一个。

标记：

<div id="audit">
    <p>
        <label class="check-label">Question 1</label>
        <br />
        <input type="radio" value="Yes" id="CAT_Custom_235312_0" name="CAT_Custom_235312" class="required" />Yes
        <br />
        <input type="radio" value="No" id="CAT_Custom_235312_1" name="CAT_Custom_235312" class="required" />No</p>
    <p>
        <label class="check-label">Question 2</label>
        <br />
        <input type="radio" value="Yes" id="CAT_Custom_235313_0" name="CAT_Custom_235313" class="required" />Yes
        <br />
        <input type="radio" value="No" id="CAT_Custom_235313_1" name="CAT_Custom_235313" class="required" />No</p>
    <p>
        <label class="check-label">Question 3</label>
        <br />
        <input type="radio" value="Yes" id="CAT_Custom_235314_0" name="CAT_Custom_235314" class="required" />Yes
        <br />
        <input type="radio" value="No" id="CAT_Custom_235314_1" name="CAT_Custom_235314" class="required" />No</p>
</div>
<div class="granted" style="display: none;">Yes</div>
<div class="denied" style="display: none;">No</div>

还有 JS

$('input[type="radio"]').click(function () {
    if ($('input[type=radio]:checked').val() == 'No') {
        $('.denied').show();
        $('.granted').hide();
    } else {
        $('.granted').show();
        $('.denied').hide();
    }
});

这是我目前所拥有的 jsFiddle：http://jsfiddle.net/5ZKyH/1/（仅限收音机）

它适用于第一个项目，但之后不再适用。我可以根据需要多次更改第一个答案，它会交换，但如果我转向第二个问题，则没有任何反应。

最后它需要准确地告诉我任何问题的答案是否都没有

似乎不太清楚如何每次检查所有输入。

Answer 1

使用以下 Javascript 尝试一下：

$("#audit").on("click", 'input[type="radio"]', function () {
    var allRadios = $('input[type="radio"]');
    var checkedNo = allRadios.filter(function () {
        return $(this).is(":checked") && $(this).val() === "No";
    });
    if (checkNo.length > 0) {
        $('.denied').show();
        $('.granted').hide();
    } else {
        $('.granted').show();
        $('.denied').hide();
    }
});

演示： http://jsfiddle.net/ma7k9/1/

它过滤选中的单选按钮并具有value“否”。如果找到，则显示“.denied”元素，否则显示“.granted”元素。

请注意我是如何更改事件绑定的。这使用事件委托，并将一个事件绑定到<div id="audit"> 元素...而不是一个事件到每个单选按钮。对我来说，这是有道理的，以防您在页面上有其他单选按钮并且不想为此定位它们，并减少绑定的处理程序的数量。

当#audit div 内发生点击事件时，回调处理程序仅在目标元素（事件起源的地方）与选择器input[type="radio"] 匹配时执行。从那里，回调执行逻辑。

Answer 2

通过在选择器结果上使用.each() 在 jquery 中迭代您的复选框，然后根据其中是否有任何被标记为“否”来适当地表现。

$('input[type="radio"]').click(function () {
    var anyNos = false;
    $('input[type=radio]:checked').each(function(e) {
        if ($(this).val() == 'No') {
            anyNos = true;
            return false;
        }            
    });

    if (anyNos) {
        $('.denied').show();
        $('.granted').hide();
    } else {
        $('.granted').show();
        $('.denied').hide();
    }
});

Answer 3

    $('input[type="radio"]').click(function () {
   if ($('input[type=radio]:checked').val() == 'No') {
   $('.denied').show();

         $("#2p").show();
           $("#3p").hide();

        if( $("input[name='CAT_Custom_235313']:checked").val()=='No')
        {
           // alert($("CAT_Custom_235313_1").val());
         $("#3p").show();
        }
} else {

}
 });

演示::http://jsfiddle.net/Praveen16oct90/5ZKyH/4/