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

Show/Hide specific DIV when selecting an checkbox Button from a dropdown using jQuery

本文关键字：隐藏 显示 DIV 按钮 jQuery 下拉菜单 复选框 选择 使用      更新时间：2023-09-26

我试图设置一个选择复选框按钮从中，使用jQuery，当选择复选框按钮将隐藏(opt2)div和取消选择复选框，然后显示div。我有大部分的功能工作，我只是不能得到隐藏div显示不选择被选中。这是我到目前为止的代码:

<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();
    }); 
});

我能做什么?

您总是通过class (.desc)显示两个div，并隐藏第二个div。你永远不会隐藏第一个-即使在两次点击后，它仍然是可见的，因为你正在使用show()。

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

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

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

jsFiddle。

请尝试一下

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

请参考之前的Stackoverflow帖子

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

改进的Nisam答案:

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

onclick将错过键盘更改

相关文章：