点击数据行选中复选框-抽离公共方法

白开水都有人用2026-04-03 9:52

✅ 一、HTML

复制代码

<table class="table table-border table-bordered table-hover table-bg table-sort">
                    <thead>
                       <tr class="text-c">
                        	<th width="25">
                          <!-- 复选框添加 点击事件 -->
				                <input type="checkbox" id="checkAll" onclick="toggleAll(this)">
				            </th>
                            <th width="80">姓名</th>
                            <th width="150">身份证号</th>
                            <th width="150">工作单位</th>
                            <th width="150">状态</th>
                            <th width="150">审核人</th>
                            <th width="150">审核时间</th>
                            <th width="150">审核状态</th>
                            <th width="150">创建时间</th>
                            <!-- <th width="80">操作</th> -->
                         </tr>
                    </thead>
                    <tbody>
                        #if(userList)
                         #for(ZZMarketUserInfo user : userList)
                         <!-- 数据行 添加 点击事件 -->
                         <tr class="text-c" onclick="toggleRow(this)" >
                           <td>
                           		<!-- 复选框 阻止 checkbox 事件冒泡 -->
				                        <input type="checkbox" name="userIds" value="${user.id}" onclick="event.stopPropagation()">
				                    </td>
		                            <td>${user.name}</td>
		                            <td>${user.idNum}</td>
		                            <td>${user.theDept}</td>
		                            <td>
		                                #if(user.theStatus == 1)已删除#end
		                                #if(user.theStatus == 0)正常#end
		                            </td>
		                            <td>${user.checkUser.name}</td>
		                            <td>${user.checkTime}</td>
		                            <td>
		                            	#if(user.checkStatus == 0)
                           待审批
		                            	#end
		                            	#if(user.checkStatus == 1)
                           审批通过
		                            	#end
		                            	#if(user.checkStatus == 2)
                           审批不通过
		                            	#end

		                            </td>
		                            <td>${user.createTime}</td>
		                           <!--  <td class="td-manage">
		                                <a title="编辑" href="javascript:;" onclick="editUser(${user.id})" class="ml-5"
                                      style="text-decoration:none">
		                                    <i class="Hui-iconfont"></i>
		                                </a>
		                                <a title="删除" href="javascript:;" onclick="deleteUser(${user.id})" class="ml-5"
                                      style="text-decoration:none">
		                                    <i class="Hui-iconfont"></i>
		                                </a>
		                            </td> -->
                                          </tr>
	                        #end
                        #end
                    </tbody>
                </table>

✅ 二、通用 JS（核心复用代码）

复制代码

// 全选/反选功能
	    function toggleAll(source) {
	        const checkboxes = document.getElementsByName('userIds');
	        for (let i = 0; i < checkboxes.length; i++) {
	            checkboxes[i].checked = source.checked;
	        }
	    }
	 	// 点击行 选中/取消 复选框
	    function toggleRow(tr) {
	        // 获取当前行里的复选框
	        let checkbox = tr.querySelector('input[type="checkbox"]');
	        if (checkbox) {
	            checkbox.checked = !checkbox.checked; // 取反
	            // 切换高亮样式
	            tr.classList.toggle('selected');
	        }
	    }