jquery-checkbox-casecade
input:checkbox casecade --- jquery plug-in
what is it ?
jquery-checkbox-casecade is a jqery plug-in that helps html developers control input:checkbox act well . Selecting all input means we should traversal all the checkboxs and use jquery to make all them seleced,eg... AKA,doing this in your codes is very troublesome , which would make your codes ugly . Then jquery-checkbox-casecade should do all this for you .
how to use it
###1 include jquery-checkbox-casecade.js in your html file .
Please make sure you have included jquery before this.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-checkbox-casecade.js"></script>###2 add an spacial attribute data-id data-parent in html input:checkbox tag
<div id="checkboxContent1">
<label>
<input type="checkbox" name="name1" data-id="p0" data-parent="-1"/>all-0</label>
<label>
<input type="checkbox" name="name1" data-id="p1" data-parent="0"/>reverse-select</label>
<br>
<label>
<input type="checkbox" name="name1" data-id="p10" data-parent="p0"/>p0-10</label>
<label>
<input type="checkbox" name="name1" data-id="p11" data-parent="p0"/>p0-11</label>
<br>
<label>
<input type="checkbox" name="name1" data-id="p20" data-parent="p10"/>p10-20</label>
<label>
<input type="checkbox" name="name1" data-id="p21" data-parent="p10"/>p10-21</label>
</div>Every input:checkbox has data-id and data-parent attr;data-id means its own ID----only one;data-parent means its parent's ID.Whit the two attrs, you can find every checkbox in the tree.
data-parent="-1" means it is the root selection. data-parent="0" means it is reverse selecttion
###3 do action !
<script type="text/javascript">
$(function () {
$('#checkboxContent1').casecade();
})
</script>use jquery-checkbox-casecade plug-in just code $('#checkboxContent1').casecade(); .
#checkboxContent1 is input:checkbox's parent DOM. If you code does not has this Dom Structure ,use bodyinstead .
To see more ,you can download and see the example file .