计算表格列中选中的复选框数答案

【问题标题】：Count number of checkboxes checked in a table column计算表格列中选中的复选框数
【发布时间】：2016-03-09 21:41:03
【问题描述】：

我现在正在努力计算一列中选中的复选框数量。我正在尝试计算它们并在底部显示总数。我的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();
    });
});

【问题讨论】：

你好，这不是让我把所有在桌子上选中的复选框都给我吗？

标签： javascript jquery html

【解决方案1】：

要获取:nth-child()的索引（索引从1开始），需要将.index()的值加1（从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>

【讨论】：

OP 有可能对行和列感到困惑。他在每一行的末尾提供了一个额外的黑色td。
不，我不困惑 :D 那是连续选中的总复选框:)