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?
