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.

JavaScript DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

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.

1 Answer

Tobias Edwards
Tobias Edwards
14,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">

The 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">

Why?

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.