How to hide and show item if checkbox is checked

Question

I am trying to hide and show an area based on whether a checkbox is checked. I've tried some options but either the area is visible all of the time or it is hidden all of the time.

JavaScript :

$(document).ready(function () {
    var mgift = $('#chkbxMGift input[type=checkbox]');     
    MshowHide();    

    mgift.change(function () {
        MshowHide();
    });
});


function MshowHide() {
    var mgift = $('#chkbxMGift input[type=checkbox]');
    var shcompany = $('#shcompany');

    if (mgift.checked) {
        shcompany.show();
    } else {       
        shcompany.hide();        
    }
}

HTML :

<li>
    <div class="info">                 
        <asp:CheckBox ID="chkbxMGift" runat="server" Text="A matching gift will be made" ClientIDMode="Static"/>
    </div>
</li>

<li id="shcompany">    
    <div class="info">               
        <label for="txtCompanyName">Company Name</label>
        <asp:TextBox runat="server" ID="txtCompanyName" CssClass="narrow" />   
    </div>
    <div class="info">  
        <label for="txtCompanyPhone">Company Phone Number</label>
        <asp:TextBox runat="server" ID="txtCompanyPhone" CssClass="narrow"  />       
    </div>
</li>

How can I make this work correctly?

possible duplicate of [Hide show based on selected Radio Button](http://stackoverflow.com/questions/15300638/hide-show-based-on-selected-radio-button) — CBroe, Mar 21 '13 at 14:50
@CBroe well I am using a checkbox now and it doesnt seem to be working — Paradigm, Mar 21 '13 at 14:52
Checkbox or Radiobutton does not make much of a difference. And one would hope (at least I do), that you _learn_ something from the answers you are getting here – but you still come along with “it does not work” … — CBroe, Mar 21 '13 at 14:54
@CBroe I used what I learnt from the question before to build on what I did just now along with google. I just seem to be stomped — Paradigm, Mar 21 '13 at 15:02

score 8 · Accepted Answer · answered Mar 21 '13 at 15:02

8

Try this code

     $(document).ready(function () {
     $('#chkbxMGift').click(function () {
         var $this = $(this);
         if ($this.is(':checked')) {
             $('#shcompany').hide();
         } else {
             $('#shcompany').show();
         }
     });
 });

Hope it solves your issue

answered Mar 21 '13 at 15:02

iJade

23,144
56
154
243

But you don't check the initial status. – Justus Romijn Mar 21 '13 at 15:14
i just modified the code in the question to make the hide and show work :) – iJade Mar 21 '13 at 15:19
if u want to remove that its fine.I mean it serves the purpose, just my way of writing $(this) – iJade Mar 21 '13 at 15:28

Justus Romijn · Answer 2 · 2013-03-21T15:13:23.117

Your selector is wrong.

var mgift = $('#chkbxMGift input[type=checkbox]');

This means you select the childnode input from parent #chkbxMGift.

I believe this is the selector you need:

var mgift = $('input#chkbxMGift[type=checkbox]');

And here are some improvements on your code:

$(document).ready(function () {
    var mgift = $('input#chkbxMGift[type=checkbox]'); 
    var shcompany = $('#shcompany');
    // check for default status (when checked, show the shcompany)
    if (mgift.attr('checked') !== undefined){
        shcompany.show();
    } else {
        shcompany.hide();
    }

    // then simply toggle the shcompany on every change
    mgift.change(function(){
        shcompany.toggle();
    });
});

jQuery's toggle is really useful and added in version 1.0, so you should be able to just go with that.

Here's a proof of concept in a jsFiddle, with only the bare minimum:

http://jsfiddle.net/Y39Bu/1/

score 1 · Answer 3 · edited May 23 '17 at 11:52

This is stolen from this answer:

http://jsfiddle.net/MH8e4/4/

$('.wpbook_hidden').css({
'display': 'none'
});

alert($(':checkbox:checked').attr('id'))
$(':checkbox').change(function() {
    var option = 'wpbook_option_' + $(this).attr('id');
    if ($('.' + option).css('display') == 'none') {
        $('.' + option).fadeIn();
    }
    else {
        $('.' + option).fadeOut();
    }
});

search for similar questions before you ask yours. Please give the original author the credit if this solves your problem

score 0 · Answer 4 · answered Mar 21 '13 at 14:49

0

Have you tried changing the CSS directly? Such as

document.getElementById("shcompany").style.display="none";

or

document.getElementById("shcompany").style.visibility="hidden";

(or "visible")

answered Mar 21 '13 at 14:49

Rice_Crisp

1,242
1
16
33

Well Thats what I did when I orginally did the function with a radiobutton list then i updated it to the show hide functions and a checkbox – Paradigm Mar 21 '13 at 14:51

score 0 · Answer 5 · answered Mar 21 '13 at 14:51

Why use JQuery when a simple CSS property change can do the trick?

Just change the div's class or modify it's style:

If you want it to take up space even when hidden use visibility:hidden (respectively visibility:visible)

if you want it NOT to take space when hidden use css display:none (respectively display:block)

How to hide and show item if checkbox is checked

5 Answers5

Linked