jQuery: if checkbox is checked, toggleClass..

Question

Hi, 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 :)

Answer 1

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.

Answer 2

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');
});

Demo: http://jsfiddle.net/nQnDG/3/

Answer 3

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.

Answer 4

Why your code doesnt work is because you dont understand the basics of jQuery.

If you want that, on a click, something will happen, you need to BIND an EVENT to it. your code is not bad but it never gets executed because you didnt bind it.

karim7's code works fine. because he is binding it to the checkbox.