使用jquery選擇特定tbody中的所有複選框

主表中將包含3個<tbody>區段和每個區段中的行。

每一行都會有一個複選框。

我想要做的是使用匹配<tbody> id的jquery選擇器。該id也是動態創建的，因此它不是一個常量值，而是使用一個變量。

我試圖使用jQuery是這樣的：

$(":input[id$='_ErrorCheckbox']").click(function() { 
     var wbId = $(this).attr('id').split("_")[0].toString().trim(); 

     $('tbody#' + wbId + ' _ErrorVisits tr td input[type="checkbox"]').prop('checked', $(this).prop('checked')); 
    });

我用這個語句搶在<tbody>行也嘗試過，但它沒有工作（一個未知的語法錯誤）：

$('tbody[id$=' + wbId + ' _ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));

上面的第一個方法，不會拋出任何錯誤，但不會選擇任何東西。

什麼是正確的方式來使用jQuery選擇器來抓住一個特定的<tbody>元素使用其ID？

編輯：下面是HTML表格輸出：

<table id="workbookTable_25116" cellpadding="10"> 
        <thead> 
         <tr> 
          <th><input type="checkbox" id="25116 _SelectAllCheckbox"></th><th>Visit Timepoint</th><th>Visit Information</th><th>Notifications/Errors</th><th>Preview SQC Analysis</th> 
         </tr> 
        </thead> 
        <tbody id="25116 _ErrorVisits"> 
         <tr><td></td><td></td><td></td><td></td></tr> 
         <tr><td><input type="checkbox" id="25116 _ErrorCheckbox"></td><td><b>Visits in Error</b></td><td></td><td></td></tr><tr style="background-color: red;"><td><input type="checkbox" id="9be44178-7273-4057-9607-acb135114b39 _25116 _Checkbox" name="visit_cb"></td><td>Week 8</td><td>1008-001, Week 8, 14005_MRI_Femur v1.0</td><td>This visit has a task in Error status!</td><td><input type="button" id="9be44178-7273-4057-9607-acb135114b39 _25116 _ResetTaskButton" value="Reset Task"></td></tr><tr style="background-color: red;"><td><input type="checkbox" id="367e7f6a-ec3a-476f-a1e3-b3eecf18db8b _25116 _Checkbox" name="visit_cb"></td><td>Week 16</td><td>1008-001, Week 16, 14005_MRI_Femur v1.0</td><td>This visit has a task in Error status!</td><td><input type="button" id="367e7f6a-ec3a-476f-a1e3-b3eecf18db8b _25116 _ResetTaskButton" value="Reset Task"></td></tr> 
        </tbody> 
        <tbody id="25116 _NotPreviouslySQCvisits"> 
         <tr><td></td><td></td><td></td><td></td></tr> 
         <tr><td><input type="checkbox" id="25116 _NotSQCCheckbox"></td><td><b>First Time SQC Visits</b></td><td></td><td></td></tr><tr style="background-color: yellow;"><td><input type="checkbox" id="d38bc66a-561e-4a12-9d95-4979eb3e9b9b _25116 _Checkbox" name="visit_cb"></td><td>Week 4</td><td>1008-001, Week 4, 14005_MRI_Femur v1.0</td><td></td><td><input type="button" id="d38bc66a-561e-4a12-9d95-4979eb3e9b9b _25116 _PreviewButton" value="SQC Analysis Preview"></td></tr> 
        </tbody> 
        <tbody id="25116 _PreSQCvisits"> 
         <tr><td></td><td></td><td></td><td></td></tr> 
         <tr><td><input type="checkbox" id="25116 _PreSQCCheckbox"></td><td><b>Previously SQC Visits</b></td><td></td><td></td></tr><tr style="background-color: greenyellow;"><td><input type="checkbox" id="25d62e5f-b69d-4f87-aaaa-09c44e06f1cb _25116 _Checkbox" name="visit_cb"></td><td>Week 12</td><td>1008-001, Week 12, 14005_MRI_Femur v1.0</td><td></td><td><input type="button" id="25d62e5f-b69d-4f87-aaaa-09c44e06f1cb _25116 _PreviewButton" value="SQC Analysis Preview"></td></tr> 
        </tbody> 
       </table>

編輯：發現解決方案，需要各地ID報價。代碼見下面的答案。感謝大家的幫助。

來源

2014-07-07 RXC

將代碼粘貼到小提琴上 –

向我們展示html表輸出 – machineaddict

不應該是'$（'tbody＃'+ wbId +'_ErrorVisits ...'，沒有前導空格嗎？我懷疑你有'<_ErrorVisits >元素在你的頁面中 –

對不起每個人，但事實證明，我失蹤了id選擇器周圍的引號。

下面是最終jQuery代碼：

$("tbody[id$='" + wbId + " _ErrorVisits'] tr td input[type='checkbox']").prop('checked', $(this).prop('checked'));

行情需要被周圍放置的ID，以防止語法錯誤，因爲ID有空間在裏面。

來源

2014-07-07 14:14:07 RXC

這是一種解決方法或快速修復而非解決方案。 ID不應該有空格。 – PeterKA

@ user3558931 - 我同意這一點，但在asp mvc中，我抓取模型數據並向其添加文本，如下所示：'id =「@ wb.Id _Checkbox」'我需要那裏的空間或者剃鬚刀表達式尋找名爲wb.Id_Checkbox的屬性。我將研究如何避免這些空間符合html標準。 – RXC

後續行應改爲：

$('tbody[id$=' + wbId + ' _ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));

要：

$('tbody[id$=' + wbId + '_ErrorVisits] tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));

是：與'_ErrorVisits]更換' _ErrorVisits]。

注：我不會建議對使用id's與空間，但空間可以作爲速戰速決如下轉義：

更換wbId與wbId.replace(/ /g, '\\\\ ')

的理想的解決方案是修復ID以消除空間。

來源

2014-07-07 13:54:14 PeterKA

@Sudharsan，在'_ErrorVisits'之前刪除了前導空格。然而，提問者[揭示]他們的'id'屬性* do *包含空格（http://stackoverflow.com/questions/24612175/select-all-check-boxes-in-specific-tbody-using-jquery#comment38138437_24612175），這樣就不會解決他們的問題。 –

使用jquery選擇特定tbody中的所有複選框

回答

相關問題