計算表格列中選中的複選框的數量

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>