Jquery从Child Table手风琴中选择全部

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复选框指定一个唯一值。 [标签= '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'属性值并使用它来选择正确的表并仅在该表中设置复选框。 [ $（'＃'+ $（this）.attr（'tab'））。find（'。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。