Question

Im having trouble with a jquery function where i have 5 option boxes (which when clicked checks a checkbox) and a checkbox for “none of these”.

I am trying to create a function where you can select multiple options, and by checking the “none of these” checkbox, it resets them and, and vice versa where if you again select an option (or multiple), the “none of these” checkbox becomes unchecked.

Think of it as a market research question!

Copy of it below

http://jsfiddle.net/pGgkT/

Problem i am having is when i select, for example option 5,4,3 and then click “none of these”, then go bac to select 5,4,3, they take 2 clicks to select instead of just 1 which is only necessary for the others i didnt select originally (1,2).

Answer 1

toggle internally adds a click handler to the div as per the documentation given here.
To solve your issue you need to call a click on the checked divs when you click on none.

I have made a simplified solution here

You can solve this by changing the click handler for none option to :

//Checkbox click - Remove selections 
$("#none").click(function() {
    if ($("#none").attr("checked") == "checked") //IF "NONE OF THESE" IS CHECKED!
    {
        var parentsOfSelectedOptions = $( /*<<selector to get parent>>*/ );
        $(parentsOfSelectedOptions).each(function(item) {
            $(item).click();
        });

        //other actions
    }, function() {
        //other actions
    }
});