Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by George Tang
George Tang
9,449 Points

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,458 Points
Tobias Edwards
Tobias Edwards
14,458 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.