jquery - Best way to build a "select all" checkbox -

i have "select all" checkbox(a) , others related it(b).

i hope:

1. when a's checked or not, make of b same a.
2. when of b's checked, make a's checked.
3. when not of b's checked,make a's not checked.

using jquery preferred, but there better way coming html5?

like:

<checkbox id="target" name="select all"/> <checkbox relatetd="target" name="1"/> <checkbox relatetd="target" name="2"/> 

or xpath if have many subgroups different dom structures:

<checkbox id="target" name="select all"/> <div>     <checkbox relatetd="../" name="1"/>     <checkbox relatetd="../" name="2"/> </div>  <checkbox id="target2" name="select all"/> <div>     <div>         <checkbox relatetd="../../" name="1"/>         <checkbox relatetd="../../" name="2"/>     </div> </div> 

<input type="checkbox" id="checkall" /> check / uncheck  <input type="checkbox" class="chk" value="option1" /> option 1 <input type="checkbox" class="chk" value="option2" /> option 2 <input type="checkbox" class="chk" value="option3" /> option 3     $('#checkall').change(function () {     $('.chk').prop('checked', this.checked); });  $(".chk").change(function () {     if ($(".chk:checked").length == $(".chk").length) {         $('#checkall').prop('checked', 'checked');     } else {         $('#checkall').prop('checked', false);     } }); 

demo

this should work you