1

I'm trying to setup a select checkbox Button from which, using jQuery, when select checkbox button will hide (opt2) DIV and unselect checkbox Then show div. 我的大部分功能都在工作，我只是无法让隐藏 DIV 显示 unSelect 被选中。到目前为止，这是我的代码：

<style type="text/css">
    .desc{ display: none; }
</style>

<div> Delivery Details</div>
<label><input type="checkbox" name="group1" value="opt2">Same as Billing Details</label>
<div id="opt2" class="desc"> Billing Details Form</div>


$(document).ready(function(){ 
    $("input[name$='group1']").click(function() {
        var test = $(this).val();
        $("div.desc").show();
        $("#"+test).hide();
    }); 
});

我能做些什么？

4

4 回答 4

2

您总是通过类 ( .desc) 显示两个 div，并隐藏第二个。您永远不会隐藏第一个 - 即使单击两次后，它仍会在您使用时保持可见show()。

代替$("div.desc").show();

和$("div.desc").toggle();

这将切换show()状态，首先单击它会显示，然后它会隐藏等等。

jsFiddle在这里。

于 2013-06-04T19:14:53.553 回答
1

请试试这个

$("input[name$='group1']").click(function () {
    $("div.desc").toggle(this.checked);
});

请参考之前的 Stackoverflow 帖子

于 2013-06-04T19:15:38.797 回答
0 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    .desc{ display: none; }
</style>
</head>

<body>
<script src = "jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    $("input[name$='group1']").click(function() {
        var test = $(this).val();
        if($("div.desc").css('display') == 'none')
            $("div.desc").css('display','block');
        else if($("div.desc").css('display') == 'block')
            $("div.desc").css('display','none');
            //$("#"+test).hide();
    }); 
});
</script>
<label><input type="checkbox" name="group1" value="opt2">opt1</label>

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc">consectetur adipisicing</div>
</body>
</html>
于 2013-06-04T19:18:58.413 回答
0

改进了 Nisam 的答案：

$("input[name$='group1']").change(function () {
  $("div.desc").toggle(this.checked);
});

onclick 将错过键盘更改。

于 2013-06-04T19:22:44.800 回答