Member Avatar for fcvolunteer

I know there are jquery snippets all over the internet showing how to show/hide <div> text based on whether a checkbox has been checked. Jquery is not a strong point of mine so I've really researched a lot to figure out how to do this. So far I'm able to get the <div> text to show when the appropriate checkbox is checked but the problem is, when the checkbox is unchecked the <div> text stays showing and doesn't go back to "hide".

Here's a link to the test page I've made. http://www.friendshipcirclenc.org/show-hide-test/

You'll notice that when the 2nd or 3rd checkbox is checked, additional form fields show but when either of those boxes are unchecked nothing happens.

Here's my code:

$(document).ready(function() {
    //Hide the field initially
    $("#dad_address").hide();

    $('#dadaddress').click(function() {
        if ($(this).is(':checked')) {
            $("#dad_address").show('fast');
        }
        else
        {
            $("#dad_address").hide('fast');
        }
    }); 

    $("#mom_address").hide();

    $('#momaddress').click(function() {
        if ($(this).is(':checked')) {
            $("#mom_address").show();
        }
        else
        {
            $("#mom_address").hide();
        }
    }); 

});

Any help would be much appreciated.

Thanks in advance,

fcvolunteer

Edited by fcvolunteer
  • 4 Contributors
  • 13 Replies
  • 1K Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by ome2012
Member Avatar for JorgeM

I checked your test page and when I check the checkbox, the div shows as expected and when I uncheck the div hides. So you were able to resolve your problem?

In any case, here is another method...

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
   </head>
<body>

<input type="checkbox" id="dadaddress"/>
<div id="dad_address" style="display:none">Content</div>

<script type="text/javascript">
 $(document).ready(function(){
    $('#dadaddress').click(function() {
       $("#dad_address").toggle(this.checked);
    });
 });
</script>
</body>
</html>
Edited by JorgeM
Member Avatar for fcvolunteer

Hi JorgeM,

Thanks for taking a look. The problem I'm having is that when I click on another checkbox it doesn't hide the <div> text. It only becomes hidden if the checked box is unchecked first which is really not user friendly or practical. (I actually tried the toggle method and had the same issues)

Any other ideas of how I can get this to work?

Thanks!

Member Avatar for ome2012

try to make a condition that only one checkbox can only be checked....

Member Avatar for fcvolunteer

Hi ome2012,

Pardon my ignorance but what would that look like in javascript? I've already set that in the form shortcode and if you look at the link I included it only allows for one checkbox to be clicked. What other changes are you suggesting I make? Sorry, I'm not a javascript coder by any stretch of the imagination. I stick to html and css :-/ if you point me in the right direction I'll try it.

thanks!

Edited by fcvolunteer
Member Avatar for ome2012

Hi fc,

This is just on my own opinion... why don't you use radio button instead of checkbox??? no offense but i think this might solve your problem... ^_^

Member Avatar for ome2012 
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
   </head>
<body>

<input type="radio" name="sex" value="male" id="dadaddress">Male<br>
<input type="radio" name="sex" value="female" id="dadaddress2">Female
<div id="dad_address" style="display:none">John</div>
<div id="dad_address2" style="display:none">Jessa</div>
<script type="text/javascript">
 $(document).ready(function(){
    $('#dadaddress').click(function() {
       $("#dad_address").toggle(this.checked);
       $("#dad_address2").hide();
    });
    $('#dadaddress2').click(function() {
       $("#dad_address2").toggle(this.checked);
       $("#dad_address").hide();
    });
 });
</script>
</body>
</html>

try this one sample.... ^_^ i just change it to radio button instead of a checkbox

Member Avatar for Airshow

fcVol,

I think it best to switch from event-driven logic to event-stimulated state-driven logic. In other words, logic by which the state of all relevant elements is addressed when any of the three buttons is clicked.

This caters more simply for the mutually exclusivity of dad/mom, and associated changes of state when #bothparents is clicked.

//Cache of jQuery objects
var $$ = {
    b_bothparents: $("#bothparents"),
    b_dadaddress: $('#dadaddress'),
    b_momaddress: $('#momaddress'),
    dad_address: $("#dad_address"),
    mom_address: $("#mom_address")
};

//Function which handles the moding of buttons and corresponding address blocks
function addressMode() {
    if($$.b_bothparents.is(':checked')) {
        $$.b_dadaddress.add($$.b_momaddress).attr('disabled',true);
        $$.b_dadaddress.next('span').add($$.b_momaddress.next('span')).addClass('disabled');
        $$.dad_address.add($$.mom_address).hide();
    }
    else {
        $$.b_dadaddress.add($$.b_momaddress).attr('disabled',false);
        $$.b_dadaddress.next('span').add($$.b_momaddress.next('span')).removeClass('disabled');
        var d = $$.b_dadaddress.is(':checked');
        $$.dad_address[d ? 'show' : 'hide']();
        $$.mom_address[d ? 'hide' : 'show']();
    }
}

//Ensure b_bothparents and b_dadaddress are initially checked
$$.b_bothparents.attr('checked',true);
$$.b_dadaddress.attr('checked',true);

//Delegate the moding function to the .parentaddress wrapper
$(".parentaddress").on('click', 'input', addressMode);

//And ensure all other states are initially correct by calling addressMode().
addressMode();

DEMO

NOTES:

  • In the demo, #dadaddress/#momaddress are type=radio, as is convention for mutually exclusive buttons.
  • For completeness, a CSS .disabled directive is used to handle the greying out of label text.
Edited by Airshow
Member Avatar for fcvolunteer

Wow! Thanks @ome2012 and @Airshow! It's now working and here's what I did:

I tried ome2012's script and I made some changes:

$(document).ready(function(){
        //Hide these fields initially
        $("#dad_address").hide();
        $("#mom_address").hide();

    $('#bothparents').click(function() {
    $("#dad_address").toggle(this.checked);
    $("#dad_address").hide();
    $("#mom_address").hide();
    });
    $('#dadaddress').click(function() {
    $("#dad_address").toggle(this.checked);
    $("#mom_address").hide();
    });
    $('#momaddress').click(function() {
    $("#mom_address").toggle(this.checked);
    $("#dad_address").hide();
    });
});

Then (after figuring that one out) I noticed that the "hidden" <div> is visible for a second as it loads with the rest of the form and then immediately gets hidden and really I'd like it to be hidden entirely (so no one sees it load. So I tried the other script and tweaked that one as well (which was more challenging for me since it's a more complex script. but I figured it out and here's what I came up with:

$(document).ready(function(){
//Cache of jQuery objects
var $$ = {
b_bothparents: $("#bothparents"),
b_dadaddress: $('#dadaddress'),
b_momaddress: $('#momaddress'),
dad_address: $("#dad_address"),
mom_address: $("#mom_address")
};
//Function which handles the moding of buttons and corresponding address blocks
function addressMode() {
if($$.b_bothparents.is(':checked')) {
//$$.b_dadaddress.add($$.b_momaddress).attr('disabled',true);
$$.b_dadaddress.next('span').add($$.b_momaddress.next('span')).addClass('disabled');
$$.dad_address.add($$.mom_address).hide();
}
else {
$$.b_dadaddress.add($$.b_momaddress).attr('disabled',false);
$$.b_dadaddress.next('span').add($$.b_momaddress.next('span')).removeClass('disabled');
var d = $$.b_dadaddress.is(':checked');
$$.dad_address[d ? 'show' : 'hide']();
$$.mom_address[d ? 'hide' : 'show']();
}
}
//Ensure b_bothparents and b_dadaddress are initially checked
$$.b_bothparents.attr('checked',true);
//$$.b_dadaddress.attr('checked',true);
//Delegate the moding function to the .parentaddress wrapper
$(".parentaddress").on('click', 'input', addressMode);
//And ensure all other states are initially correct by calling addressMode().
addressMode();
});

In the end I'm using Ome2012's because it will be easier for me to duplicate and change for other parts of the form but I'm just wondering, is there a way in either script to have the hidden fields stay hidden even during the page's initial loading?

Thanks!

Member Avatar for Airshow

Disabling buttons when they are not relevant is good practice as it helps make the interface more intuitive.

You can try hiding elements with CSS directives but whatever you do, some browsers are prone to giving a "Flash Of Unstyled Content" (FOUC) as the page loads.

I find Opera to be particularly good at giving a FOUC.

Member Avatar for fcvolunteer

Thanks @Airshow. Actually the way the buttons were disabled made it impossible for the person filling out the form to change their mind since the alternative buttons became disabled once they chose "both parents" for example. Appreciate your thoughts though, thanks!

I've visited other sites that use the show/hide button method but I didn't see any "FOUC" when I got to their page so I was wondering.

Member Avatar for Airshow

fcVol, two things I had in mind were :

  • deselecting the "both parents" checkbox (to re-enable the radio buttons and to show either dad or mom) was intended allow a change of mind but I must have some misundrstanding of how you want the interface to work.
  • hidden form elements aren't submitted, so when the "both parents" checkbox is checked, then only the "both parents" address block (not included in my Demo) would be sent.

Anyways, good luck with it.

Member Avatar for fcvolunteer

Just to clarify, a radio button by definition isn't "unselectable" it requires the user to select a different choice. The way your script worked was once the user clicked on the "both parents" button the other two were "grayed out" and you couldn't select them so there was no ability to deselect "both parents".

I don't need any hidden elements to be submitted I just want the user to be able to freely choose and change their mind without having to reload the page.

I got it for now so thanks!

Member Avatar for ome2012

your welcome fc

you can mark this as solved ^_^

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.