JQuery Select All From Child Table Accordion

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. Дайте таблицы, соответствующие идентификаторам, чтобы они могли быть выбраны. [идентификатор таблицы = '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. Добавить событие щелчка к классу 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 для примера работы.