I am a jQuery noob and seems I always will be, been trying to get this simple thing to work.
What I want is, when the checkbox is checked, hide the div with display: none;.
Here's a jFiddle example of what I'm making a mess of.
Thanks for any help, or other solutions :)
I agree with karim if you just need to hide/show, use .toggle(bool), if your example is simplified and you need a class, use .toggleClass("class", bool), like this:
$(function(){
$("#checkbox4").change(function() {
$("#checkout-shipping-address").toggleClass("show-hide", this.checked)
}).change();
});
You can test it out here, the last .change() call is to make the state match when the page first loads, here's what I mean.
click and set the initial state with triggerHandler('click') instead. Please see my answer.
change...it had issues with bubbling a change event prior to 1.4.2 (causing .live() issues), but nothing on the actual checkbox that I've seen or heard of. My demo above works in IE8/7 without any issue...I don't have 6 handy to test, but I don't see how it'd fail, onchange is at a pretty basic level in the API :)There is no need for a show-hide class. Just pass a boolean to toggle, and set the initial state of the div by using triggerHandler, which lets you fire an event handler bound to an element without actually affecting the state of the element:
$(document).ready(function() {
$("#checkbox4").click(function() {
$("#checkout-shipping-address").toggle(this.checked);
}).triggerHandler('click');
});
Try the following code:
$(function(){
$('#checkbox4').change(function() {
$("#checkout-shipping-address").toggleClass("show-hide");
});
});
You need to bind the change or click event in order to react.
