Javascript 检查所有单选按钮的选定值

我有一系列问题。一次可以看到一个问题，其余的问题隐藏起来，当你按下一步的每个问题时。您也可以按back键，边走边更改答案

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

标记：

<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>

以下是我到目前为止所掌握的一部分：（仅限于收音机）

它在第一项上起作用，但在第二项之后不再起作用。我可以根据自己的喜好多次修改第一个答案，它会互换，但如果我转到第二个问题，什么也不会发生

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

---

似乎不太明白如何每次检查所有输入。

使用以下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();
    }
});

演示：

它过滤正在检查且具有

值的单选按钮

“否”。如果找到任何，则显示“.denied”元素，否则显示“.grated”元素

注意我是如何更改事件绑定的。这使用事件委派，并将一个事件绑定到

元素…而不是将一个事件绑定到每个单选按钮。对我来说，这是有意义的，以防页面上有其他单选按钮，并且不希望以此为目标，并减少绑定的处理程序的数量

---

当在

#audit

div中发生单击事件时，回调处理程序仅在目标元素（事件发生的位置）与选择器

输入[type=“radio”]

匹配时执行。从那里，回调将执行逻辑。

使用以下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();
    }
});

演示：

它过滤正在检查且具有

值的单选按钮

“否”。如果找到任何，则显示“.denied”元素，否则显示“.grated”元素

注意我是如何更改事件绑定的。这使用事件委派，并将一个事件绑定到

元素…而不是将一个事件绑定到每个单选按钮。对我来说，这是有意义的，以防页面上有其他单选按钮，并且不希望以此为目标，并减少绑定的处理程序的数量

---

当在

#audit

div中发生单击事件时，回调处理程序仅在目标元素（事件发生的位置）与选择器

输入[type=“radio”]

匹配时执行。从那里，回调将执行逻辑。

通过使用选择器结果上的

.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();
    }
});

---

通过在选择器结果上使用

.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();
    }
});

演示：：

---

演示：：

这是一种享受，我非常感谢您对如何以及为什么进行更改的描述。更容易理解和学习。这是一种享受，我很欣赏你对如何以及为什么做出改变的描述。更容易跟随和学习。