javascript - jQuery - checkboxes selecting all on a row or with similar names & ID's -

using jquery 1.9.1 & getting xml returned query needs displayed in web page shown in picture below. had asked similar question several days ago on place in asking. hope ask better questions time.

for items in picture, xml input be:

<classrooms>     <room number="3">         <machine>310</machine>         <machine>320</machine>         <machine>340</machine>         <machine>350</machine>     </room>     <room number="8">         <machine>810</machine>         <machine>820</machine>         <machine>840</machine>     </room>     <room number="10">         <machine>1010</machine>         <machine>1020</machine>     </room> </classrooms> 

the code below function called upon successful ajax get , builds checkboxes in table on web page.

var $roomlist = $( items ); var roomliststring = jq_xmldoctostring( $roomlist ); var roomlistxml = $.parsexml(roomliststring);  $(roomlistxml).find("row").each(function() {     var activerooms = $( roomlistxml ).find("row").text();     var nbrrooms = $(activerooms).find("room").size();     $(activerooms).find("room").each(function() {         var roomno = $(this).attr("number");         var roomchk = "room"+roomno;         var $tr = $("<tr />");         $tr.append('<td><input type="checkbox" name="'+roomchk+'" id="'+roomchk+'" class="checkall" /><label for="'+roomchk+'">room '+roomno+'</td>');         $("#mytable").append( $tr );          $(this).children().each(function() {             var machid = $(this).text();             var idname = "room"+roomno+"mach"+machid;             $tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" /><label for="'+idname+'">'+machid+'</td>');             $("#mytable").append( $tr );             });         });     }); 

when above code run on data, html in table shown below.

<tbody>    <tr>      <td>        <input name="room3" id="room3" class="checkall" type="checkbox" />        <label for="room3">room 3</label>      </td>      <td>        <input name="room3mach310" id="room3mach310" type="checkbox" />        <label for="room3mach310">310</label>      </td>      <td>        <input name="room3mach320" id="room3mach320" type="checkbox" />        <label for="room3mach320">320</label>      </td>      <td>        <input name="room3mach340" id="room3mach340" type="checkbox" />        <label for="room3mach340">340</label>      </td>      <td>        <input name="room3mach350" id="room3mach350" type="checkbox" />        <label for="room3mach350">350</label>      </td>    </tr>    <tr>      <td>        <input name="room8" id="room8" class="checkall" type="checkbox" />        <label for="room8">room 8</label>      </td>      <td>        <input name="room8mach810" id="room8mach810" type="checkbox" />        <label for="room8mach810">810</label>      </td>      <td>        <input name="room8mach820" id="room8mach820" type="checkbox" />        <label for="room8mach820">820</label>      </td>      <td>        <input name="room8mach840" id="room8mach840" type="checkbox" />        <label for="room8mach840">840</label>      </td>    </tr>    <tr>      <td>        <input name="room10" id="room10" class="checkall" type="checkbox" />        <label for="room10">room 10</label>      </td>      <td>        <input name="room10mach1010" id="room10mach1010" type="checkbox" />        <label for="room10mach1010">1010</label>      </td>      <td>        <input name="room10mach1020" id="room10mach1020" type="checkbox" />        <label for="room10mach1020">1020</label>      </td>    </tr> </tbody> 

selection of checkbox on page enable submit button on page, when clicked pass value of boxes checked function. user can select number of individual boxes (the ones number beside them), regardless of room items associated with. when user selects room checkbox though, all individual checkboxes room should checked. individual values ones want. when submit button clicked, individual values sent function.

i had looked @ topic using checkbox class select all.

i'm using code below find what's checked. can see when select individual box gets added array. can see when select room checkall found, can't seem make individual checkboxes checked once do. had been attempting use attribute starts with jquery selector, haven't been able check boxes.

$("#mytable").click(function(e) {     var ele = $(this).find(":checkbox");     var zall = $(this).find(":checkbox.checkall:checked");     if (zall) {         var zname = $(zall).attr("name");         var selectallmachines = "input[name^='" + zname +"']:checked:enabled";         $( $(selectallmachines), "#mytable");         }     var arr = [];     $(":checkbox:checked").each(function(i) {         arr[i] = $(this).val();         });     }); 

i'm sure i'm overlooking, missing? appreciate suggestions or guidance on i'm doing wrong, or if there's perhaps better way i'm doing.

thanks!

you can this

$('.checkall').change(function(){    $('input[id^='+this.id+']').prop('checked',this.checked); }); 

when .checkall clicked/changes - set checked property on inputs id starts current clicked elements id

fiddle

though should delegate since using ajax elements - assuming #mytable exists on dom ready - or replace ancestor element does

$('#mytable').on('click','.checkall',function(){      $('input[id^='+this.id+']').prop('checked',this.checked); }); 

another alternative give checkall id class relative checkboxes

$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" class="'+roomchk+'"/><label for="'+idname+'">'+machid+'</td>'); 

then can do

$('#mytable').on('click','.checkall',function(){      $('input.'+this.id).prop('checked',this.checked); }); 

fiddle