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。

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

2 个答案: