I have a page that looks like this: <div class="table-of-contents"> <div class="chapters-title"> <h3><input type="checkbox" id="chaper-01" /><label for="chapter-01">Chapter title</label></h3> </div> <ul class="pages-container"> <li> <div class="pages"> <ul> <li><input type="checkbox" id="page-01" /><label for="page-01">Page title</label></li> <li><input type="checkbox" id="page-02" /><label for="page-01">Page title</label></li> <li><input type="checkbox" id="page-03" /><label for="page-01">Page title</label></li> <li><input type="checkbox" id="page-04" /><label for="page-01">Page title</label></li> </ul> </div> </li> </ul> </div>
What I want is that when clicking the first checkbox in the <h3> all checkboxes are checked in the <div class="pages"> But they have to be unchecked when that same checkbox is clicked again. I thought it would be simple but I tried some things now I am getting crazy... it won't work. Maybe I am thinking to difficult?