jQuery - 選擇所有行或類似名稱和ID的複選框

Question

使用jQuery 1.9.1 &獲取從需要在網頁中顯示的查詢返回的XML，如下圖所示。我幾天前曾問過一個類似的問題，但在我所問的問題上已經遍佈各處。希望這次能提出更好的問題。

，針對畫面中的項目，XML輸入應該是：

<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> 

下面的代碼是一個是在成功AJAX GET呼籲和建立一個表中的checkboxes功能網頁。

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); 
      }); 
     }); 
    }); 

當上面的代碼在數據上運行時，表中的HTML如下所示。頁面上的任何複選框

<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> 

選擇將使頁面，點擊它會通過檢查到另一個函數框的值當在SUBMIT按鈕。用戶可以選擇任意數量的單個盒子（旁邊有數字的盒子），而不管這些項目與哪個房間相關聯。當用戶選擇房間複選框時，全部該房間的個別複選框也應該被選中。個人價值觀是我想要的。當點擊按鈕SUBMIT時，單個值將全部發送到該功能。

我有looked at this topic關於使用複選框class來選擇全部。

我使用下面的代碼來查找檢查的內容。我可以看到當我選擇一個單獨的盒子，它被添加到數組中。我還可以看到，當我選擇一個房間時，找到了checkall，但我似乎無法讓單個複選框在我執行後進行檢查。我一直在試圖使用jQuery選擇器Attribute Starts With，但一直未能得到它來檢查框。

$("#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(); 
     }); 
    }); 

我確定這是我忽略的東西，但是我錯過了什麼？希望對我在做什麼錯誤的任何建議或指導，或者是否有更好的方式來做我正在做的事情。

謝謝！

Answer 1

你可以做這樣的事情

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

當點擊.checkall /變化 - 集上有ID的所有輸入檢查屬性，它與當前開始點擊元素id

FIDDLE

雖然你可能應該委託，因爲你使用ajax來獲取元素 - 這是假設#mytable存在於DOM就緒 - 或者，做

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

另一種選擇是給checkall ID作爲一個階級的相對複選框

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

那麼你可以做一個祖先元素取代

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

FIDDLE