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

最新推荐文章于 2024-07-03 03:02:19 发布

又菜又爱玩呜呜呜~

最新推荐文章于 2024-07-03 03:02:19 发布

阅读量1.9k

点赞数

分类专栏： javaweb 文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/biancheng4/article/details/126845000

版权

javaweb 专栏收录该内容

2 篇文章

订阅专栏

这是一个关于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
   })

在这里插入图片描述