我应该对哪个事件进行更改？

Question

In an html form I have a checkbox that has a label. When you click the checkbox or its label, it toggles the checkedness of the checkbox. It's wrapped in a <div> .

I am using jquery to hide another element of the form if the checkbox is checked. Originally I was using the .click() function of the wrapping div. But I noticed that you could click between the checkbox and the label ( which is still within the div), and get the other to hide, even though the checkbox was not checked. (Also, for some reason, clicking on the label caused the element to hide then reappear, but I don't think I need to open that can of worms).

I was thinking that instead of the click() of the div, I should look at both the checkbox and the div separately. Then I thought I just might look for something like an onChange event for the checkbox itself, which clicking the label should affect. Then I thought that people have probably solved this problem before and I should not try to re-invent the wheel.

What's a simple way to keep the checkbox value and the hide/show state of my element in sync, when two different elements can change the checkbox status?

Answer 1

在此实例中，复选框的onChange事件可能会很好地满足您的需求。

Answer 2

Attach a onclick event to the checkbox (a onchange event works too). Whether you click on the checkbox itself, or its label, the event handler will fire. Just make sure that the label's for attribute contains the id of the checkbox.

http://jsfiddle.net/FishBasketGordo/GJbce/

Answer 3

尝试在复选框输入上使用.change()函数。