Jquery從子表中選擇全部表手風琴

Question

我很難找出一種方法來選擇所有低於手風琴選項卡的表中的所有成員。我可以選擇表格的所有成員，但我不能只選擇屬於特定選項卡的成員。這個jquery函數的一個要求是它必須和我一起工作，以後動態填充表格。

下面是我一直在jsfiddle中處理的一些代碼。 http://jsfiddle.net/brandondestroy/ve77f/26/ 謝謝！

JS：

$(document).ready(function(){ 
    //accordion 
    $(function() { 
    $("#accordion").accordion(); 
    }); 
    $('#accordion input[type="checkbox"]').click(function(e) { 
    e.stopPropagation(); 
    }); 
    $('#chckHead').click(function() { 
    if (this.checked == false) { 
     $('.chcktbl:checked').attr('checked', false); 
    } 
    else { 
     $('.chcktbl:not(:checked)').attr('checked', true); 
    } 
    }); 
}); 

HTML：

<div id="accordion"> 
    <h3><input type="checkbox" id ="chckHead"/> Suite 1</h3> 
    <div> 
    <table> 
     <tr> 
     <td width=10%> 
      <input type="checkbox" class="chcktbl" /> 
     </td> 
     <td width=90%>Test Case 1</td> 
     </tr> 
     <tr> 
     <td width=10%> 
      <input type="checkbox" class="chcktbl" /> 
     </td> 
     <td width=90%>Test Case 2</td> 
     </tr> 
    </table> 
    </div> 
    <h3><input type="checkbox" id ="chckHead"/> Suite 2</h3> 
    <div> 
    <table> 
     <tr> 
     <td width=10%> 
      <input type="checkbox" class="chcktbl" /> 
     </td> 
     <td width=90%>Test Case 1</td> 
     </tr> 
     <tr> 
     <td width=10%> 
      <input type="checkbox" class="chcktbl" /> 
     </td> 
     <td width=90%>Test Case 2</td> 
     </tr> 
    </table> 
    </div> 
</div> 

Answer 1

有可能是一個更好的解決方案;但是，它的工作原理如下：

1. 將chckHead更改爲類。 [class =「chckHead」]
2. 添加一個名爲'tab'的屬性，並給每個chckHead複選框一個唯一值。 [tab ='SuiteX']

3. 給出匹配ID的表，以便可以選擇它們。 [表ID = 'SuiteX']

   <div id="accordion"> 
   <h3><input type="checkbox" class ="chckHead" tab='Suite1'/> Suite 1</h3> 
   
   <div> 
       <table id='Suite1'> 
        <tr> 
         <td width=10%> 
          <input type="checkbox" class="chcktbl" /> 
         </td> 
         <td width=90%>Test Case 1</td> 
        </tr> 
        <tr> 
         <td width=10%> 
          <input type="checkbox" class="chcktbl" /> 
         </td> 
         <td width=90%>Test Case 2</td> 
        </tr> 
       </table> 
   </div> 
   
   <h3><input type="checkbox" class ="chckHead" tab='Suite2'/> Suite 2</h3> 
   <div> 
       <table id='Suite2'> 
        <tr> 
         <td width=10%> 
          <input type="checkbox" class="chcktbl" /> 
         </td> 
         <td width=90%>Test Case 1</td> 
        </tr> 
        <tr> 
         <td width=10%> 
          <input type="checkbox" class="chcktbl" /> 
         </td> 
         <td width=90%>Test Case 2</td> 
        </tr> 
       </table> 
   </div> 
   

4. click事件添加到chckHead類。 [$（'。chckHead'）。點擊]

5. 設置檢查狀態時，將.attr（）更改爲.prop（）。 [.prop（'checked'，false）]

6. 在click事件中，獲取'tab'屬性值並使用它選擇正確的表並僅在該表中設置複選框。 [$（ '＃' + $（本）.attr（ '標籤'））找到（ 'chcktbl。'）。]

   $(document).ready(function() { 
   //accordion 
   $(function() { 
       $("#accordion").accordion(); 
   }); 
   
   $('#accordion input[type="checkbox"]').click(function (e) { 
       e.stopPropagation(); 
   }); 
   
   $('.chckHead').click(function() { 
        console.log($('#' + $(this).attr('tab'))); 
   
       if (this.checked == false) { 
        //$('.chcktbl:checked').attr('checked', false); 
        $('#' + $(this).attr('tab')).find('.chcktbl').prop('checked', false); 
       } else { 
        //$('.chcktbl:not(:checked)').attr('checked', true); 
        $('#' + $(this).attr('tab')).find('.chcktbl').prop('checked', true); 
       } 
   }); 
   

   }）;

查看Fiddle的工作示例。