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 — C3roe
– C3roe, Commented Mar 21, 2013 at 14:50
@CBroe well I am using a checkbox now and it doesnt seem to be working — Paradigm
– Paradigm, Commented Mar 21, 2013 at 14:52

iJade · Accepted Answer · 2013-03-21 15:02:37Z

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, 2013 at 15:02

iJade

23.9k58 gold badges163 silver badges250 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Justus Romijn Over a year ago

But you don't check the initial status.

iJade Over a year ago

i just modified the code in the question to make the hide and show work :)

iJade Over a year ago

if u want to remove that its fine.I mean it serves the purpose, just my way of writing $(this)

Justus Romijn · Accepted Answer · 2013-03-21 15:13:23Z

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/

Community · Accepted Answer · 2017-05-23 11:52:33Z

1

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

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Mar 21, 2013 at 14:50

Raffael

8208 silver badges18 bronze badges

Comments

Rice_Crisp · Accepted Answer · 2013-03-21 14:49:24Z

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, 2013 at 14:49

Rice_Crisp

1,2611 gold badge16 silver badges35 bronze badges

1 Comment

Paradigm Over a year ago

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

TheC4keIsASpy · Accepted Answer · 2013-03-21 14:51:43Z

0

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)

answered Mar 21, 2013 at 14:51

TheC4keIsASpy

711 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to hide and show item if checkbox is checked

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related