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

这是我到目前为止所掌握的一个问题：http://jsfiddle.net/5ZKyH/1/（仅限无线电）

它适用于第一项，但之后不再使用。我可以随意更改第一个答案，并且它会交换，但如果我转向问题2，则没有任何事情发生。

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

似乎无法弄清楚如何每次检查所有输入。

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

DEMO： http://jsfiddle.net/ma7k9/1/

它会过滤正在检查的单选按钮并具有value＆＃34;否＆＃34;。如果找到任何，它会显示＆＃34; .denied＆＃34;元素，否则显示＆＃34; .granted＆＃34;元件。

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

当#audit div内部发生click事件时，只有当目标元素（发生事件的位置）与选择器input[type="radio"]匹配时，才会执行回调处理程序。从那里，回调执行逻辑。

Answer 2

通过在选择器结果上使用.each()来迭代jquery中的复选框，然后根据它们中的任何一个是否标记为“No”进行相应的行为。

$('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/

检查所有单选按钮以查看所选值

3 个答案: