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]
Advertisement
jQuery is great but without useful hints and “how to start” is not that user friendly. Thanks
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.
Thanks for this Chris, I’ve just used it on a project.
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.
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.
@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.
great tips! I just use it in my project ! thanks!
I just used this in a project on both check boxes and radio buttons. It was very helpful. Thank you.
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.
Great help – Thanks.
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
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();
});
THX alot!!
I tried many websites solutions, but yours just seem to work the first time.. thx
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
$("#checkme").click(function(){// If checked
if ($("#checkme").is(":checked")) {
Simply use $(this):
$("#checkme").click(function(){// If checked
if ($(this).is(":checked")) {
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
Hi Chris,
This script is very complex & easy to understand. This is what I want to get…
Thank you so much Chris…
Warm Regards,
Jimish
[...] Dölj och visa innehåll på hemsidan (t.ex. div) med en checkbox m.h.a. jquery [...]
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
Thanks for keeping it clean and simple, saved my day.
Peter
Magic! Just what I was looking for. Thanks.
µ
Thank you for the posting. That helps a lot !!!!
Nice Tip
Thanks
Thanks!
thanks its worked for me…its very helpful
Hi Chris.
There is actually a very easy way to do this
$(“#checkme”).click(function () {
$(“#extra”).toggle(this.checked);
});
Short, sweet and to the point!