jQuery选中单选按钮时显示/关闭内容

Question

嘿，我正在寻找一个非常简单的jQuery代码，当某个单选按钮被选中时，它会显示一个隐藏的div，如果该单选按钮被“取消选中”，则会隐藏该div。

我想出了如何让它与复选框一起工作，但我不知道为什么它不能与单选按钮一起工作。

下面是与复选框配合使用的代码：

$("#radio-id").click(function(){
   // If checked
    if ($("#radio-id").is(":checked")) {
        //show the hidden div
        $("#div-id").show("slide");
    } else {
        //otherwise, hide it
        $("#div-id").hide("slide");
    }
});

Answer 1

if ($("#radio-id").is(":checked")) {

     //Put code here

} else{

     //Put code here

}

看起来你犯了一个语法错误。我不认为div是可以检查的。

Answer 2

试试这个：

$("#radio-id").click(function(){
   // If checked
    if ($("#radio-id").is(":checked")) {
        //show the hidden div
        $("#div-id").show("slide");
    } else {
        //otherwise, hide it
        $("#div-id").hide("slide");
    }
});

基于你的jsfiddle的更新：

<style>
  #div-id{display:none} 
</style>

<div id="testing" >
  <input type ="radio" id="radio-id" name="link" >Option 1</input>
  <input type ="radio" name="link" >Option 2</input>
</div>
<div id="div-id"> IT WORKS!<div>

<script type="text/javascript" >
$("#testing").click(function(){
if ($("#radio-id").is(":checked")) {

        //show the hidden div
         $("#div-id").show("slide");

    } else {


        $("#div-id").hide("slide");
    }
});
</script>

你的jsfiddle：

http://jsfiddle.net/YZCN3

新的jsfiddle：

http://jsfiddle.net/YZCN3/2/