Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
relationship between checkbox and label
In the createLI function, the checkbox is assigned as the child of the label. But the filterCheckBox is the sibling of the label with div as the parent. Is there a reason for that? Thanks.
Tobias Edwards14,457 Points
Let's go through some use cases:
When the checkbox is the child of label, the checkbox is automatically bound to the label, and so clicking on the label text also toggles the checkbox:
<label> Click me to toggle the checkbox, too! <input type="checkbox"> </label>
When the checkbox is a sibling of label (or placed anywhere else), the checkbox can only be activated by clicking on the checkbox:
<label>I do nothing!</label> <input type="checkbox">
for attribute binds a
label to the id of an
input, so now clicking the label toggles the checkbox.
<label for="myCheckbox">I can toggle the checkbox now!</label> <input id="myCheckbox" type="checkbox">
It's all about usability and making it easier to click the checkbox. A large
label bound to an
input tag increase the area in which the checkbox can be toggled.