如何在2级列表中捕获顶部复选框并设置其样式

Question

This is doing my head in. I have a 2-level list that functions nicely with some jQuery. I want to capture the top checkbox ('Master checkbox') to style it in CSS and hover a border around it, but I can't seem to access it. Wrapping a label around the input tag messses up my jQuery and doesn't seem to help anyway. Any ideas anyone on what I'm doing wrong? Fiddle

 $('input[type=checkbox]').click(function() { $(this).next().find('input[type=checkbox]').prop('checked', this.checked); $(this).parents('ul').prev('input[type=checkbox]').prop('checked', function() { return $(this).next().find(':checked').length; }); }); 

 .treeBOXClass { border: 1px solid green; width: 540px; height: 250px; font-family: "Verdana", Arial, serif; font-size: 13px; padding: 10px 0px 0px 20px; list-style-type: none; background: white; } .treeBOXClass ul li { color: blue; margin: 7px 0px 4px 12px; list-style-type: none; } .myFlexbox { display: -webkit-flex; display: flex; width: 450px; margin: 20px 0px 0px 0px; padding: 15px 0px 15px 0px; border: 1px solid blue; } .my_RH_Text { width: 350px; margin: 0px 0px 0px 20px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="treeBOXClass"> <li> <input type="checkbox" id="mastercheckbox" value="yes" />Master checkbox <ul> <label for="HS1"> <div class="myFlexbox"> <li><input type="checkbox" id="HS1" value="one" />HS1</li> <div class="my_RH_Text"> This is text that I have put in the first box as an example </div> </div> </label> <label for="HS2"> <div class="myFlexbox"> <li><input type="checkbox" id="HS2" value="one" />HS2</li> <div class="my_RH_Text"> This is text that I have put in the second box as an example </div> </div> </label> </ul> </li><br> </ul> 

Answer 1

Wrap a label around the input element and move the id to it.

Then tweak the jquery so instead of targeting the sibling, it has to go to the parent THEN the sibling.

Proof of concept: I've added a red border around the master checkbox.

PS: Also wrapped the ul children in li tags for valid html.

 $('input[type=checkbox]').click(function() { $(this).parent().next().find('input[type=checkbox]').prop('checked', this.checked); $(this).parents('ul').prev().find('input[type=checkbox]').prop('checked', function() { return $(this).parent().next().find(':checked').length; }); }); 

 #mastercheckbox { border:1px solid red; } .treeBOXClass { border: 1px solid green; width: 540px; height: 250px; font-family: "Verdana", Arial, serif; font-size: 13px; padding: 10px 0px 0px 20px; list-style-type: none; background: white; } .treeBOXClass ul li { color: blue; margin: 7px 0px 4px 12px; list-style-type: none; } .myFlexbox { display: -webkit-flex; display: flex; width: 450px; margin: 20px 0px 0px 0px; padding: 15px 0px 15px 0px; border: 1px solid blue; } .my_RH_Text { width: 350px; margin: 0px 0px 0px 20px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="treeBOXClass"> <li> <label id="mastercheckbox"><input type="checkbox" value="yes" />Master checkbox</label> <ul> <li> <label for="HS1"> <div class="myFlexbox"> <input type="checkbox" id="HS1" value="one" />HS1 <div class="my_RH_Text"> This is text that I have put in the first box as an example </div> </div> </label> </li> <li> <label for="HS2"> <div class="myFlexbox"> <input type="checkbox" id="HS2" value="one" />HS2 <div class="my_RH_Text"> This is text that I have put in the second box as an example </div> </div> </label> </li> </ul> </li><br> </ul>