Solved

Use jQuery to show/hide a div when checkbox is checked

Posted on 2009-05-16
1
3,292 Views
Last Modified: 2012-05-07
Hi there!

I'm looking for a short and sweet jQuery snippet that will show a div based on it's ID when a certain checkbox is checked. Then if the checkbox is not checked, the div will be invisible...

I know this is probably pretty easy and I've seen it before, but I can't find where I've seen it now...

Below is the full section of the form that I'm dealing with at the moment. The checkbox with the ID "bgimg-yes" is the controller... If it is checked, then I want the div with the ID of "bgimgs" to be visible. If it's NOT checked, then I want the div ID "bgimgs" to be invisible.
<fieldset>
			<legend>Look &amp; Feel</legend>
			<span class="sexy_option">Use a background image? <input <?php echo (($sexy_plugopts['bgimg-yes'] == "yes")? 'checked="checked"' : ""); ?> name="bgimg-yes" id="bgimg-yes" type="checkbox" value="yes" /></span>
			<div id="bgimgs">
			<label class="bgimg share-sexy"><input <?php echo (($sexy_plugopts['bgimg'] == "sexy")? 'checked="checked"' : ""); ?> id="bgimg-sexy" name="bgimg" type="radio" value="sexy" /></label>
			<label class="bgimg share-care"><input <?php echo (($sexy_plugopts['bgimg'] == "caring")? 'checked="checked"' : ""); ?> id="bgimg-caring" name="bgimg" type="radio" value="caring" /></label>
			<label class="bgimg share-wealth"><input <?php echo (($sexy_plugopts['bgimg'] == "wealth")? 'checked="checked"' : ""); ?> id="bgimg-wealth" name="bgimg" type="radio" value="wealth" /></label>
			<!--<label class="bgimg"><input <?php echo (($sexy_plugopts['bgimg'] == "none")? 'checked="checked"' : ""); ?> id="bgimg-none" name="bgimg" type="radio" value="none" />(none)</label>-->
			</div>
			<div class="clear"></div>
						
			<span class="sexy_option">Animate-expand multi-lined bookmarks?</span>
			<label><input <?php echo (($sexy_plugopts['expand'] == "1")? 'checked="checked"' : ""); ?> name="expand" id="expand-yes" type="radio" value="1" />Yes</label>
			<label><input <?php echo (($sexy_plugopts['expand'] != "1")? 'checked="checked"' : ""); ?> name="expand" id="expand-no" type="radio" value="0" />No</label>
			
			<span class="sexy_option">Auto-center the bookmarks?</span>
			<label><input <?php echo (($sexy_plugopts['autocenter'] == "1")? 'checked="checked"' : ""); ?> name="autocenter" id="autocenter-yes" type="radio" value="1" />Yes</label>
			<label><input <?php echo (($sexy_plugopts['autocenter'] != "1")? 'checked="checked"' : ""); ?> name="autocenter" id="autocenter-no" type="radio" value="0" />No</label>
			<p>(Note: selecting <b>Yes</b> above will void any custom styles applied below.)</p>
				
			
			<label for="xtrastyle">You can style the DIV that holds the menu here:</label><br/>
			<textarea id="xtrastyle" name="xtrastyle">
<?php 
	$default_sexy = "margin:20px 0 0 0 !important;\npadding:25px 0 0 10px !important;\nheight:29px;/*the height of the icons (29px)*/\ndisplay:block !important;\nclear:both !important;";
	if (!empty($sexy_plugopts['xtrastyle'])) {
		echo $sexy_plugopts['xtrastyle']; 
	} 
	elseif ( empty($sexy_plugopts['xtrastyle']) )
		echo $default_sexy;
	else {
		echo "If you see this message, please delete the contents of this textarea and click \"Save Changes\".";
	}
?>
			</textarea>
 
		</fieldset>

Open in new window

0
Comment
Question by:blatantwaste
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 3

Accepted Solution

by:
blatantwaste earned 0 total points
ID: 24404934
Nevermind, I figured it out on my own...

Here's how I did it.

First, I added the class "hidden" to the div so it looked like:

<div id="bgimgs" class="hidden">

In the stylesheet the class hidden was set to "display:none;"

Then in my script, I used the following:
jQuery(document).ready(function() {
  jQuery('#bgimg-yes').click(function() {
   if (this.checked) {
    this.checked=jQuery('#bgimgs').removeClass('hidden');
   } else {
      jQuery('#bgimgs').addClass('hidden');
     }
  });
}

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question