javascript - 计算表列中选中的复选框数量-6ren

javascript - 计算表列中选中的复选框数量

转载作者：行者123 更新时间：2023-12-03 07:28:45

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

最佳答案

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

关于javascript - 计算表列中选中的复选框数量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35893085/

文章推荐： javascript - NodeJS 验证后如何使用 AngularJS 访问用户信息？

文章推荐： Javascript:360 度旋转和矩阵组合的问题

文章推荐： javascript - ngstrap typeahead无序多关键字搜索

文章推荐： javascript - 尝试打印 json 中的关键变量

javascript - 获取父级中的 div 数量，然后获取特定类的 div 数量
我有几个带有视频和图像的 Bootstrap slider 。在 slider 之外，我想要一个可以转到包含视频的幻灯片的按钮。包含视频的幻灯片的数量因 slider 而异。我想做的是获取幻灯片的数量
SQL 组按自定义类别(数量)
我在编写一个查询时遇到了一些问题。我有一个由文件及其大小(以字节为单位)组成的表。它看起来像这样: FileUrl | FileSize ------------------ xyz.docx |
javascript - 获取iframe的层级/数量
我有一个带 iframe 的网站和一个带另一个 iframe 的网站，所以它是一个 iframe 内嵌另一个 iframe(都在不同的域上)。那么有没有办法从父div或父主div的url(parent
javascript - 表达式类型(数量)
以下表达式在 JavaScript 中给出了特殊的结果。 typeof (5 + "7") // Gives string typeof (5 - "7") // Gives number 如
php - 获取上周的数据(数量)
我有一个名为“交易”的表，每当有人在我的网站上进行购买时，我都会在其中输入用户 ID、购买类型和金额。我想向每个用户显示过去 7 天的这些统计信息。目前，我有这个: $data = array()
以周为单位汇总的每天的 PostgreSQL 数量
我一整天都在努力寻找解决这一挑战的办法。我有一张 table : id | amount | type | date |
hadoop - reducer 数量
我正在尝试在 10 个数据节点的集群中测试 Map reduce 程序的性能。在此过程中，我使用了 5 个 Reducers，然后是 10 个等等。我在想增加 reducer 的数量也会使工作完成得
jquery - 监控类型=数量？
我正在使用 html5 输入 type="number"。我想监视此输入的变化，但是: 因为在支持它的浏览器中它有旋转控件我不能只监视 .keyup, 因为我不想等待它失去焦点，所以我不能只监视
MySQL - 查找和计算重复项(数量)
我的购物车表格有问题。我创建了一个如下所示的表格: SQL Fiddle 我的问题是我希望能够选择产品 ID，并计算该产品 ID 在表格中重复的次数，以便我可以显示用户在购物车中拥有的商品数量。寻找
要使用的 PHP 数量
我使用许多包含来显示我网站的一小部分。使用许多 include 是否合适，或者我应该减少它们(尽可能多)。包含函数要多花多少时间？我的主页加载速度很慢。有什么方法可以让它加载更快。 (我的主页每天在
c - 如何找到数组中存在的项目的长度/数量？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: length of array in function argument 我的数组大小是5。例如: arrC
python - 是否有标准的pythonic方法来处理python中的物理单位/数量？
是否有标准的 Python 方法来处理 Python 中的物理单位/数量？我看到了来自不同领域(如物理学或神经科学)的不同模块特定解决方案。但我更愿意使用标准方法而不是“孤岛”解决方案，因为其他人应该
javascript - 有没有办法查看事件循环中的 promise 数量？
基本上就像标题所说的那样，有没有办法从 JavaScript 程序中查看事件循环中当前存在多少个 promise ？最好在 Deno 上。最佳答案 Deno v1.26 添加了一个内部 API，可用
oop - 大型项目的类(class)数量
我只是想知道大型项目-比如说航空公司的预订系统，它可能有多少类/对象。对象：客户，飞机，机场，路线，机票，订单。这就是我能想到的。该项目可能是成千上万的代码行，那么是否可能会有更多的类（执行与对象无
scala - 如何限制Scala中未处理的 future 数量？
如果有办法限制Scala中未处理的 future 数量，我将无法提供资金。例如下面的代码: import ExecutionContext.Implicits.global for (i
javascript - 获取数组的所有(数量)组合
从昨天开始，我一直在努力做到这一点，尽管还没有运气。我找到了解决方案，在我想要完成的事情上总是有细微的差别。我试图获得所有可能的组合，稍微像这样:combination_k ，但我也希望相同的项目与
quickbooks - 更新手头 IPP 数量
我正在尝试更新 1500 个 QuickBooks Online 库存项目的现有数量。我可以从商店中提取 1500 种产品。这个更新可以做吗？我看到手头没有数量的物品: https://develo
Kubernetes 不同的容器参数取决于副本集中的 pod 数量
我想与工作人员一起扩展应用程序。可能有 1 名 worker 或 100 名 worker ，我想无缝扩展它们。这个想法是使用副本集。然而，由于特定领域的原因，扩展它们的适当方法是让每个工作人员知
android - 如何计算布局中的 View 数量
Android Studio 有没有办法显示 XML 布局中存在的 View 数量？众所周知，布局应该包含 <=80 个 View ，因此超过此值就会出现此警告，因此告知数量会非常有帮助。 Layou
iphone - 保留 IBOutlet 数量
虽然编码时总是出现有关 IBOutlet 保留计数的相同问题:从 NIB 取消归档对象后保留计数？何时对 IBOutlet 使用 @property？设置时保留还是分配？ Mac 和 iPhone 之

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 计算表列中选中的复选框数量