jquery not acting as I expect it to

Question

There seems to be an issue with something that I am trying to do in regards to check boxes (or radio boxes) and showing hidden content.

Html

<input type="checkbox" id="carousel" class="carouselGlobal" name="aisis_options[carousel_global]" value="carousel_global">

Simple check box. Now lets add some jquery to display a hidden section, with the div class of .sectionCarousel

jQuery

    $('.carouselGlobal').click(function(){
        if ($(this).attr("id") == "carousel"){
            $('.sectionCarousel').show();
        } else {
            $('.sectionCarousel').hide();
        }
    });

This is easy, you click, you see, you click off, you don't see.....wrong

Issue

If I click the check box using the above code to display the hidden section it shows, if I click the check box again to unchecked the item is still there.

So now if we save the form, we assume the check box stays checked on page refresh, we need to keep the section displayed so we do:

jQuery

    if ($('input[value=carousel_global]:checkbox:checked').attr('id') === "carousel") {
        $('.sectionCarousel').show();
    } 

Which is pretty simple in what it does.

Issue number one is repeated here again, if you click the check box to un-check it, the section is still display. How ever if you save the form at this point then the section disappears until you click the check box again.

As you can see that can become an issue.

So I ask you:

before form save

When I click the check box the hidden section should display, when I click it again to un-check, it should disappear.

After form save

Assuming the check box is clicked on page refresh the section should remain visible, if I then click the check box to unchecked it, the content (in this case the section) should disappear.

Clicking to show works, un-checking and it (the section) disappearing - does not work. Why?

Answer 1

If you must use a click event bound to a group of elements you need to also check the checked state, similar to this:

$('.carouselGlobal').click(function(){
    var $this = $(this);
    var theId = this.id;

    if (theId === "carousel"){
        if($this.is(":checked")){
            $('.sectionCarousel').show();
        } else {
            $('.sectionCarousel').hide();
        }
    }
});

---

DEMO - Adding state check

---

Edit

Your piece of code works until I submit the form, after words the check box is still clicked but the section div is hidden, when it should not be.

You can work around this by separating your code similar to this:

var setSectionCarouselState = function (showIt) {
    if (showIt) {
        $('.sectionCarousel').show();
    } else {
        $('.sectionCarousel').hide();
    }
}

$('.carouselGlobal').click(function () {
    var $this = $(this);
    var theId = this.id;

    if (theId === "carousel") {
        setSectionCarouselState($this.is(":checked"));
    }
});

setSectionCarouselState($('#carousel').is(":checked"));

---

DEMO - Separating the code

---

The code above is not intended for copy-pasting as it works in an isolated environment of a jsFiddle but minor tweaks may be required to get it to work within your specific environment.

Edit

if I have 6 or seven of these, obviously different id's and classes is there an easy way to handle them or would I write out something similar to this answer, for each one?

I'm not 100% sure how your setup is, but assuming you have multiple checkboxes which each show/hide 1-to-1 another element or selector. You can write a more generic solution.

One option would be to use a data-attribute approach in which you assign each checkbox the selector it suppose to effect. This would make the use of id attribute redundant too.

Assume you have HTML similar to this:

<input type="checkbox" class="carouselGlobal">
<input type="checkbox" class="carouselGlobal" data-target-selector=".anotherSectionCarousel">
<input type="checkbox" class="carouselGlobal" data-target-selector=".sectionCarousel" checked>

<div class="sectionCarousel" style="display:none;">section carousel</div>
<div class="anotherSectionCarousel" style="display:none;">another section carousel</div>

As you can see above, each checkbox has a data-target-selector attribute containing the selector of the element it suppose to effect.

Your script becomes quite small now:

// method which takes in the DOM reference of a checkbox
// interrogates the data attribute and uses it
// to show/hide the matching element
var setTargetState = function (checkbox) {
    var $this = $(checkbox);
    var $target = $($this.attr('data-target-selector'));

    if(!$target.length){
        return;
    }

    if ($this.is(":checked")) {
        $target.show();
    } else {
        $target.hide();
    }
}

// click event drastically simplified
$('.carouselGlobal').click(function () {
    setTargetState(this);
});

// iterates through all checkboxes ensureing the initial state is applied
$('.carouselGlobal').each(function(){
    setTargetState(this);
});

---

DEMO - Using a data attribute for example

---

Answer 2

jsFiddle Demo

Consider using toggle, and using the id to target the checkbox, like this:

$("#carousel").click(function(){$('.sectionCarousel').toggle();});