Question

我正在尝试设置一个选择复选框按钮，使用jQuery，当选择复选框按钮将隐藏（opt2）DIV并取消选中复选框然后显示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();
    }); 
});

我该怎么办？

Answer 1

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

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

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

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

jsFiddle here.

Answer 2

请试试这个

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

请参阅之前的this Stackoverflow帖子

Answer 3

<!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>

Answer 4

改进了Nisam的答案：

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

onclick将错过键盘更改。

使用jQuery从下拉列表中选择复选框按钮时显示/隐藏特定DIV

4 个答案: