Bootstrap中关于Checkbox全选实现不了的问题

最新推荐文章于 2025-09-22 05:15:39 发布

原创

最新推荐文章于 2025-09-22 05:15:39 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap中checkbox全选无法实现 #解决Bootstrap中checkbox选择无效的问题 #checkbox选择无效 #Metronic Bootstrap CheckBox全选无效 #全选checkbox无效 js

在使用Bootstrap的Metronic模板时，遇到Checkbox全选功能失效的问题。原JS代码不起作用，发现Checkbox被额外的标签包裹，导致样式冲突。通过修改JS，使其针对Checkbox的父标签添加样式，成功实现全选和反选。同时提供了获取Checkbox值的方法及Controller层接收数据的示例。

Bootstrap中关于Checkbox全选实现不了的问题解决

今天在用Bootstrap模板(使用的是Metronic模板)改写时，遇到需要对管理员批量重置密码的需求，需要自己实现Checkbox的全选和反选，但是对于我原来写的js代码，在这里就不适用了。
下面是界面
在这里插入图片描述
HTML部分代码

<table class="table  table-striped table-bordered table-hover " id="sample_1">
<thead>
	<tr>
		<th style="width:8px;"><input type="checkbox" id="checkall" class="checker" data-set="#sample_1 .checkboxes" /></th>
											<th >管路员ID</th>
											<th >姓    名</th>
											<th >登录账户</th>
											<th >电话</th>
											<th >电子邮箱</th>
											<th >授权日期</th>
											<th >拥有角色</th>
											<th >&nbsp;</th>
											<th >&nbsp;</th>
	</tr>
</thead>
	<tbody>
       <c:forEach items="${ainfo}" var="ad">           									
			<tr class="odd gradeX"><