0

ラジオボタングループがあります

<input type="radio" name="Q1" value="Yes />
<input type="radio" name="Q1" value="No />

私も2つのdivを持っています

<div id="Q4" style="display:none"> Some content</div>
<div id="Q5" style="display:none"> Some content</div>

これは、Jqueryを使用してやりたいことです

誰かが値 Yes のラジオ ボタンをクリックした場合 - div id=Q4 を display:block に設定します。値 No のラジオ ボタンをクリックした場合 - div id=Q4 を display:none に設定し、div id=Q5 display:block を設定します。

私は試みてきましたが、あまり成功していません。jQueryでアラートを使用して、何が間違っているのかを理解しようとしました。誰でも助けてください

$('input[type="radio"]').click(function(){
var userClick= $('input:radio[name=Q1]:checked').val();
switch(userClick){
  case 'Yes':
alert('Number1');
   case 'No':
     alert('Number2');    
  }
});
4

4 に答える 4

1

できるよ

$('input[type="radio"]').change(function(){
    var value = this.value;

    if (value === "Yes") {
        $("#Q4").css("display", "block");
        $("#Q5").css("display", "none");
    }
    else {
        $("#Q5").css("display", "block");
        $("#Q4").css("display", "none");
    }
});

ここに素晴らしい動作デモがあります: http://jsfiddle.net/byvvx/

于 2013-04-23T20:15:12.803 に答える
0

あなたが説明していることを行う簡単な方法は次のとおりです。

$('input[name=Q1]').click(function () {
    $('#Q4,#Q5').hide();
    if ($(this).val() == "Yes") $('#Q4').show();
    if ($(this).val() == "No") $('#Q5').show();
});

jsFiddle の例

于 2013-04-23T20:23:41.730 に答える
0

チェックボックスのnameプロパティをchange使用して、ラジオ ボタンでイベント ハンドラーを使用し、表示を処理できます。このようなもの：

$("input[@name='Q1']").change(function(){
    var selected = this.value;

    if (selected === "Yes") {
        $("#Q5").css("display", "none");
        $("#Q4").css("display", "block");            
    }
    else {
        $("#Q4").css("display", "none");
        $("#Q5").css("display", "block");   
    }
});

また、値の末尾にある二重引用符がチェックボックスにありません。これが質問のみのタイ[o]であることを願っています。それ以外の場合は、それも修正してください。

于 2013-04-23T20:18:07.587 に答える
0

jQuery の show() および hide() メソッドを使用して div を表示できます。

次のようなことを試してください：

$(document).ready(function() {
    $('input[type="radio"]').click(function(){
        var userClick= $('input:radio[name=Q1]:checked').val();

        if(userClick === "Yes") {
            $("#Q4").show();
            $("#Q5").hide();
        } else if(userClick === "No") {
            $("#Q5").show();
            $("#Q4").hide();
        }
    });
});
于 2013-04-23T20:21:18.973 に答える