0

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

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

标记：

<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/（仅限收音机）

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

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

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

4

3 回答 3

4

尝试使用以下 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">元素...而不是一个事件到每个单选按钮。对我来说，这是有道理的，以防您在页面上有其他单选按钮并且不想为此定位它们，并减少绑定的处理程序的数量。

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

于 2013-04-10T05:08:59.517 回答
0

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

$('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();
    }
});
于 2013-04-10T05:10:46.900 回答
0 
    $('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/

于 2013-04-10T05:19:12.130 回答