Using jQuery to Show/Hide Form Elements Based on a Checkbox Selection

Standard

I have been hankering (whatever that means) to use jQuery since I saw it a month or so ago. So, when a friend was working on a form that had a checkbox to show/hide other form elements, I figured I'd give it a shot.

Turned out to be pretty easy and the code is short and easy to read. Here’s the demo and below is the JavaScript that makes it happen

	
	
	$(document).ready(function(){

		//Hide div w/id extra
	   $("#extra").css("display","none");

		// Add onclick handler to checkbox w/id checkme
	   $("#checkme").click(function(){

		// If checked
		if ($("#checkme").is(":checked"))
		{
			//show the hidden div
			$("#extra").show("fast");
		}
		else
		{
			//otherwise, hide it
			$("#extra").hide("fast");
		}
	  });

	});
	 

[tags]jquery[/tags]

About these ads

28 thoughts on “Using jQuery to Show/Hide Form Elements Based on a Checkbox Selection

  1. Agreed. The new web site is a good move in the right direction. Once I understand it a bit more, I’ll try to get something together to put on the site with more of the getting started type things.

  2. Thanks for the post – I’ve been starting to use jQuery quite a bit in projects but the way it handles checkboxes has been slightly doing my head in.

    This is exactly the kind of example I’ve been looking for.

  3. Thanks Chris. This works great…but if the user checked and then refreshes the page the div doesn’t show. Check value “state” would be great. Please let me know if you have a way around that. :)

  4. @Lorrie: you can use the jQuery cookie plugin and store the state of the checkbox in the cookie. Then, on document ready, check for the cookie value and do the show/hide as appropriate. If you did this, you’d want to break out the click handler for the checkbox into a separate function so you could reuse it to call from both the click handler and your cookie checking code.

    Hope this helps.

  5. Thanks. As an additional observation, using slideDown and slideUp or simply slideToggle can also achieve a desired effect. It sometimes plays smoother without bumping elements around it.

  6. Hi!

    Great! This is just what I need for a project! =)

    Just 1 question, though…

    suppose you have 2 checkboxes, and want to only show one of them. For ex, option A and option B, and I want to do it so that whenever any option is selected, the other checkbox is disabled, so that only one checkbox can be checked.

    How could I do this?

    Thanks!

    Cheers from Cancun,Mexico! =)

    Camilo Olea

  7. instead of using this:

    $("#checkme").click(function(){
    // If checked
    if ($("#checkme").is(":checked")) {
    //show the hidden div
    $("#extra").show("fast");
    } else {
    //otherwise, hide it
    $("#extra").hide("fast");
    }
    });

    you can simply use:

    $("#checkme").click(function(){
    $("#extra").toggle();
    });

    • Hello Cory. I have wrote some code to hide and show my drobdownlist base on the Checkbox check . I have one Check box ( div nonUS) and 2 dropdownlist 1. dowpdownlist state (div state) and 2. dropdownlist Countries (div nonUs1)
      what i want is when the page load div-nonUs1 is hide and div-state is show. and when you click on Checkbox div-nonUS then div_nonUs1 will will show and and the div-state will hide .Here is my code is below so my problem is when the page is load div-nonUs1 is hide and div-state is show but when i click Checkbox div-nonUS . the state div is hide but nonUS is not show . If you or any body have any idea about this please help me out .
      Thanks alot.

      $(document).ready(
      function () {

      $(‘#nonUs1′).hide();*@
      $(
      ‘#nonUS’).click(function () {
      var thisCheck = $(this);
      if (thisCheck.is(‘:checked’)) {
      $(
      ‘#nonUs1′).css(“display”, “”);
      }
      else {
      $(
      ‘#nonUs1′).css(“display”, “non”);
      }
      });
      $(
      ‘#nonUS’).click(function () {
      var thisCheck = $(this);
      if (thisCheck.is(‘:checked’)) {
      $(
      ‘#state ‘).css(“display”, “none”);
      }
      else {
      $(
      ‘#state’).css(“display”, “”);
      }
      });
      @*

  8. Great script. I executed it here:
    http://www.prova.fm/writeup/index.php?option=com_listings&task=add&Itemid=7

    writeup

    I turned the form into 4 checkboxes that each reveals a hidden div. I was hoping you could check & see if there’s a cleaner way to do the code. Here’s what I did:

    $(document).ready(function(){

    //Hide div w/id extra
    $(“#maghide”).css(“display”,”none”);
    $(“#newsphide”).css(“display”,”none”);
    $(“#bloghide”).css(“display”,”none”);
    $(“#otherhide”).css(“display”,”none”);

    // Add onclick handler to checkbox w/id checkme
    $(“#magazine”).click(function(){

    // If checked
    if ($(“#magazine”).is(“:checked”))
    {
    //show the hidden div
    $(“#maghide”).show(“fast”);
    }
    else
    {
    //otherwise, hide it
    $(“#maghide”).hide(“fast”);
    }
    });

    $(“#newspaper”).click(function(){
    if ($(“#newspaper”).is(“:checked”)) { $(“#newsphide”).show(“fast”); }
    else { $(“#newsphide”).hide(“fast”); }
    });

    $(“#blog”).click(function(){
    if ($(“#blog”).is(“:checked”)) { $(“#bloghide”).show(“fast”); }
    else { $(“#bloghide”).hide(“fast”); }
    });

    $(“#other”).click(function(){
    if ($(“#other”).is(“:checked”)) { $(“#otherhide”).show(“fast”); }
    else { $(“#otherhide”).hide(“fast”); }
    });
    });

    (I compacted the 3 new checkbox calls).

    Thanks again,
    -David

  9. $("#checkme").click(function(){
    // If checked
    if ($("#checkme").is(":checked")) {

    Simply use $(this):
    $("#checkme").click(function(){
    // If checked
    if ($(this).is(":checked")) {

  10. Very nice, here you are the example without JQuery :

    function toggle(divId) {
    var divArray = document.getElementsByTagName("div");
    for(i = 0; i < divArray.length; i++){
    if(divArray[i].className == divId){
    if(divArray[i].style.display != 'none'){
    divArray[i].style.display = 'none';
    }else{
    divArray[i].style.display = '';
    }
    }
    }
    }

    See Descriptions

    Hello This is #1
    Hello This is #2
    Hello This is #3
    Hello This is not one of them

  11. Sjors

    For multiple boxes and change of div on check

    $(document).ready(function(){

    //hide the replacing text
    $("#displayshort1").hide(); $("#displayshort2").hide();

    //Toggle between divs
    $("#checkme").click(function(){
    $("#displayshort1").toggle();
    $("#displaylong1").toggle();
    });
    $("#checkme2").click(function(){
    $("#displayshort2").toggle();
    $("#displaylong2").toggle();
    });

    });

    HTML

    Long text
    short text

    Long text
    short text

  12. Pingback: Mvc de PlaceHolder

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s