jquery - 选择单选按钮时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

尝试这个 ：

$("#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/

Answer 2

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

     //Put code here

} else{

     //Put code here

}

看来您犯了语法错误。我不认为可以检查div。