Question

I am using the following Jquery on label elements to add or remove a class depending on it’s current state.

$('label').click(function(){
if ($(this).hasClass('selected')){
    //alert('its classy');
    $(this).removeClass('selected')
} else {
    $(this).addClass('selected');
    //alert('its NOT classy');
    }
});

As far as I am concerned it should work! However in Firefox this requires a double-click and in Chrome it doesn’t work at all.

Currently this is the only Javascript of any kind on the page so it’s not being broken by any plugins or anything like that.

The relevant html of the element looks like this:-

<label class="">Filter item<input type="checkbox" /></label>

Thanks in advance.

Answer 1

I don’t know why this is the case, but you can fix the problem by moving the input outside of the label:

<label for="yourCheckbox">Filter item</label>
<input type="checkbox" id="yourCheckbox" />

Here’s a working example. Note that the example uses toggleClass as suggested by @Matt in the comment on your question. I’ve tried it in both Chrome and Firefox and it seems to work fine.