使用jquery获取table多选框的选中值及id

这是一个关于HTML表格的示例,包含用户信息如编号、用户名、性别和账号状态等。表格中集成多选框功能,当用户点击checkbox时,可以获取选中用户的ID。点击编辑按钮可以启动编辑模态框,授权角色按钮用于角色分配,删除按钮则删除用户。提供的JavaScript代码片段实现了检查选中用户ID的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.table的html
<table id="tableId"  class="table table-bordered">
                            <thead>
                            <tr>
                                <th>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input type="checkbox" id="check-all"><span></span>
                                    </label>
                                </th>
                                <th>编号</th>
                                <th>用户名</th>
                                <th>性别</th>
                                <th>账号状态</th>
                                <th>创建者</th>
                                <th>修改者</th>
                                <th>角色</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                           <c:forEach items="${pageList}" var="user" >
                            <tr>
                                <td>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input class="getAllId" type="checkbox" name="ids[]" value="${user.id}"><span></span>
                                    </label>
                                </td>
                                <td>${user.id}</td>
                                <td>${user.username}</td>
                                <c:if test="${user.gender == 1}">
                                    <td></td>
                                </c:if>
                                <c:if test="${user.gender == 0}">
                                    <td></td>
                                </c:if>
                                <c:if test="${user.state == 0}">
                                    <td><span class="text-success">正常</span></td>
                                </c:if>
                                <c:if test="${user.state == 1}">
                                    <td><span class="text-danger">封禁</span></td>
                                </c:if>
                                <td>${user.createBy}</td>
                                <td>${user.modifyBy}</td>
                                <td>
                                  <c:forEach items="${user.roles}" var="role">
                                      <span class="btn-primary">${role.name}</span>
                                  </c:forEach>
                                </td>
                                <td style="width: 500px">
                                    <div class="btn-group">
                                        <button data-target="#edit" data-toggle="modal" data-userId="${user.id}" data-whatever="@mdo" class="btn btn-success btn-w-sm">编辑</button>
                                        <button style="margin-left: 20px" data-toggle="modal" data-id="${user.id}" data-target="#exampleModal" data-whatever="@mdo" class="btn btn-info btn-w-sm">授权角色</button>
                                        <button style="margin-left: 20px" data-id="${user.id}" data-name="${user.username}" class="example-p-2 btn btn-danger btn-w-sm">删除</button>
                                    </div>
                                </td>
                            </tr>

                           </c:forEach>

                            </tbody>
                        </table>
2.点击多选框获取出用户id(checkbox被选中后length>0)
$('.getAllId').click(function (){
       let res = $('#tableId tr')
       let arr = []
       res.each(function (index, item){
           $(this).children('td:first').each(function (j, item1){
               let checkbox = $(this).find(':checkbox:checked');
               if (checkbox.length > 0){
                   let userid1 = checkbox.val()
                   arr.push(userid1)
               }
           })
       })
       u_ids = arr
   })

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值