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

Question

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. I have most of the functionality working, I just can't get the hide DIV to displayed unSelect is selected. This is my code so far:

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

What can i do?

score 2 · Accepted Answer · answered Jun 04 '13 at 19:14

2

You're always showing both of the divs via class (.desc), and hiding the second. You're never hiding the first - even after two clicks it'll remain visible as you're using show().

Replace $("div.desc").show();

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

This will toggle the show() state, first click it'll show, second it'll hide etc.

jsFiddle here.

answered Jun 04 '13 at 19:14

dsgriffin

66,495
17
137
137

i want When I click checkBox then hide div...Onthe other hand show div – Ebrahim Jun 05 '13 at 04:15

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

pls try this

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

Please refer this previous Stackoverflow post

edited May 23 '17 at 12:11

Community

1
1

answered Jun 04 '13 at 19:15

Nisam

2,275
21
32

score 0 · Answer 3 · answered Jun 04 '13 at 19:18

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

score 0 · Answer 4 · answered Jun 04 '13 at 19:22

0

Improved on Nisam answer:

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

The onclick will miss keyboard alteration.

answered Jun 04 '13 at 19:22

Jonathan

8,771
4
41
78

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

4 Answers4