Подсчитать количество отмеченных флажков в столбце таблицы

Question

Теперь я боюсь с подсчетом количества флажков, отмеченных в столбце. Я пытаюсь подсчитать их и отобразить общее число внизу. Мой html выглядит следующим образом. Есть много столбцов!

<tr> 
    <th>Public Safety</th> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td></td> 
</tr> 
<tr> 
    <th>SSW/MS</th> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td><div class="text-center"><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></div></td> 
    <td></td> 
</tr> 

И мой JQuery до сих пор:

$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function() { 
    $(" #tblRootCauseBody tr:not(:last-child) td:nth-child("+ (that.closest('td').index() - 1) + ")").each(function() { 
     $(this).html(); 
    }); 
}); 

Answer 1

Чтобы получить индекс :nth-child() (индекс начинается с 1), вам нужно добавить 1 к значению .index() (начинается с 0)

$('#tblRootCauseBody').on('change', 'input[type=checkbox]', function() { 
 
    var index = $(this).closest('td').index() + 1, 
 
    $checked = $(" #tblRootCauseBody tr:not(:last-child) td:nth-child(" + (index) + ") input:checked"); 
 
    $('#tblRootCauseBody tr:last-child > :nth-child(' + index + ')').text($checked.length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody id="tblRootCauseBody"> 
 
    <tr> 
 
     <th>Public Safety</th> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <th>SSW/MS</th> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="text-center"> 
 
      <label class="checkbox-inline"> 
 
      <input type="checkbox" class="chkRootCauseSummary" /> 
 
      </label> 
 
     </div> 
 
     </td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 
</table>