javascript - 检查所有单选按钮的选定值

Question

我有一个问题 list 。当您浏览接下来按下的每个问题时，一次可以看到一个问题 - 其余的问题则隐藏。您还可以按返回并随时更改答案。

我试图弄清楚到目前为止是否有任何问题得到了回答“否” - 如果他们随后显示了此项目。否则显示另一个。

标记:

<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/ (仅限 radio )

它适用于第一个项目，但之后就不再适用。我可以根据需要多次更改第一个答案，并且它会交换，但如果我转到第二个问题，则什么也不会发生。

最后它需要准确地告诉我是否有任何问题得到了回答“否”

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

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”元素。

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

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