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

您可以使用复选框的名称属性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");   
    }
});

并且复选框中缺少值末尾的双引号。希望这只是问题中的一个 ty[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 回答
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 回答