Basic Jquery not working properly - sanity check please

问题

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.

回答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.

回答2:

I'm guess the reason why you're placing the input inside the label is so you can toggle the "selected" class depending on the status of the checkbox, and have it work when the click is applied to either the label or the checkbox.

Here's one way to achieve that while keeping label and input separate: http://jsfiddle.net/pkuCe/

$('#cb').change(function(){
    $("label[for=cb]").toggleClass("selected", this.checked);
});

This sets the class on label depending on the status of the checkbox, and should work when either the checkbox or the label is clicked.

---

Why is your current approach not working?

From the specifications, there's nothing wrong with nesting input within the label tag:

for = idref [CS]

This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

However, it looks like the problem you have stems from the fact that the click event is being triggered twice (thus nullifying the toggle) when you have a nested input element. I haven't tested it on all browsers, but seems to happen in FF8.

Try clicking on the label in this example: http://jsfiddle.net/cRnJS/

Apparently, clicks on label elements triggers a click event on its associated input (which is why the check/uncheck works) and this event bubbles upwards hence triggering it a second time in the parent label.

Conclusions?

1. HTML specs wise you can have input nested within a label, but it might be wise to leave them separate
2. Use the change event instead of click. (note: you can have multiple labels for each input)

回答3:

change to

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

来源：https://stackoverflow.com/questions/8385765/basic-jquery-not-working-properly-sanity-check-please