Jquery way to hide/unhide div depending on checkbox status


if ($('#isAgeSelected').is(':checked')) { $("#txtAge").show(); } else { $("#txtAge").hide(); }

You can shorten this using ternary, some might say it's a bit less readable, but that's how I would do it:

$('#isAgeSelected').is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

EDIT (14 months later): There's a much prettier way to do this, using toggle:

$('#isAgeSelected').click(function() {
    $
("#txtAge").toggle(this.checked);
});

<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>​

No comments

Enter your email address:

Delivered by FeedBurner

OR

 Subscribe in a reader

 
Latest Blogs
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tips for optimizing php code by PHP Expert Important SERVER Variables in PHP - By PHP Expert Improved Error Messages in PHP 5 - By PHP Expert New Object Oriented Features - By PHP Expert New Object Oriented Features - By PHP Expert New Object Oriented Features - By PHP Expert New Object Oriented Features - By PHP Expert New Object Oriented Features - By PHP Expert New Object Oriented Features - By PHP Expert New Object Oriented Features - By PHP Expert Object Overloading in PHP 5 Persistable Classes - By PHP Expert Dynamic Getter/Setter Methods - By PHP Expert New Functions in PHP 5 New Directives - By PHP Expert Exception Handling - By PHP Expert Password Encryption in PHP - By PHP Expert Output Buffering in PHP - By PHP Expert Page Excerpts Using CURL - By PHP Expert Quick and Easy Google Site Search - By PHP Expert Always Be Notified When Google Crawls Your Site - By PHP Expert How to POST Form Data using CURL - By PHP Expert Cryptography for web developers - By PHP Expert Dynamically Loading JavaScript Files - by PHP Expert What is Web 2.0 - By PHP Expert