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
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript">
$(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");
}
});
});
</script>
Technorati Tags: jquery
16 Comments
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/in.....p;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