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

最新推荐文章于 2024-08-16 08:38:15 发布

错过了时间

最新推荐文章于 2024-08-16 08:38:15 发布

阅读量1.1k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap中checkbox全选无法实现解决Bootstrap中checkbox选择无效的问题 checkbox选择无效 Metronic Bootstrap CheckBox全选无效全选checkbox无效 js

本文链接：https://blog.csdn.net/code__rookie/article/details/102159472

版权

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

摘要由CSDN通过智能技术生成

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">