0

質問のリストがあります。一度に 1 つの質問が表示され、残りは非表示になります。次の質問を押すたびに表示されます。途中で押し返したり、答えを変更したりすることもできます。

これまでの質問に「いいえ」と答えたものがあるかどうかを調べようとしています。それ以外の場合は、他のものを表示します。

マークアップ:

<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/ （ラジオのみ）

最初のアイテムでは機能しますが、それ以降は機能しません。最初の回答は何度でも変更でき、入れ替えることもできますが、質問 2 に移ると何も起こりません。

最後に、質問のいずれかが「いいえ」と答えたかどうかを正確に伝える必要があります

毎回すべての入力をチェックする方法を理解できないようです。

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">各ラジオ ボタンに 1 つのイベントをバインドするのではなく、1 つのイベントを要素にバインドします。ページに他のラジオ ボタンがあり、それらをターゲットにしたくない場合や、バインドされるハンドラーの数を減らす場合には、これは理にかなっています。

クリック イベントが#auditdiv 内で発生すると、コールバック ハンドラーは、ターゲット要素 (イベントの発生元) が selector と一致する場合にのみ実行されますinput[type="radio"]。そこから、コールバックがロジックを実行します。

于 2013-04-10T05:08:59.517 に答える
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 に答える
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 に答える