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?

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?

• javascript
• jquery
• asp.net
• html

• is your html incomplete? cant see checkbox? – DevelopmentIsMyPassion Commented Mar 21, 2013 at 14:46
• you need to take this function call off MshowHide(); maybe – theshadowmonkey Commented Mar 21, 2013 at 14:46
• @AshReva the checkbox right below the li – Paradigm Commented Mar 21, 2013 at 14:49
• possible duplicate of Hide show based on selected Radio Button – C3roe Commented Mar 21, 2013 at 14:50
• @CBroe well I am using a checkbox now and it doesnt seem to be working – Paradigm Commented Mar 21, 2013 at 14:52

5 Answers 5

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

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/

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

Have you tried changing the CSS directly? Such as

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

or

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

(or "visible")

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)