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

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">
				<td><input type="checkbox" name="aid" value="${ad.aid}" 		    
				id="chec" /></td>
				<td>${ad.aid}</td>
				<td >${ad.aname}</td>
				<td >${ad.account}</td>
				<td >${ad.tel}</td>
				<td ><a href="mailto:${ad.email}">${ad.email}</a></td>
				<td >${ad.createtime}</td>
				<td>
                <a class="span12 m-wrap popovers" data-trigger="hover" 
                data-content="${ad.rp_role}"  data-original-title="详细信
                息">${ad.roleinfo}...</a> 
				</td>
				<td><a href="#" onclick="updateRole('${ad.aid}');">修改</a>
				</td>	
				<td><a href="#" onclick="deleteAdmin('${ad.aid}');">删除</a>
				</td>
			</tr>
         </c:forEach>       
</tbody>
</table>

最开始的js代码：

  <script>
    //全选和反选
   		$("#checkall").on("click",function(){
			if($(this).is(':checked')){
				$('input[name="aid"]').each(function(){
					$(this).prop("checked",true);
				});
			}else{
				$('input[name="aid"]').each(function(){
					$(this).prop("checked",false);
				});
			}
		});        
</script>

但是这样实现不了全选或者反选的功能，一开始以为是js不对，后来把模板中media/js/app.js中$(this).uniform();注释掉,原来的js就有效果了，但是会出现没有引用样式，界面就会显得很不协调。

注释$(this).uniform();后可以看到复选框的样式变了，这不是想要的结果。

后来在页面调试时看到了源码中多了一些标签：

Checkbox外边又多了两层标签，并且当选中的时候，标签增加了一个样式<span class="checked">，这就和写的代码不符，后来想了想，$(this)是checkbox对象，应该是给checkbox的父标签增加样式，所以就修改成：

 <script>
    //全选和反选
   		$("#checkall").on("click",function(){
			if($(this).is(':checked')){
				$('input[name="aid"]').each(function(){
					$(this).prop("checked",true);
					$(this).parents('.checker').find('span').addClass('checked');
				});
			}else{
				$('input[name="aid"]').each(function(){
					$(this).prop("checked",false);
					$(this).parents('.checker').find('span').removeClass('checked');
				});
			}
		});
        
</script>

注意：$(this).parents('.checker').find('span').removeClass('checked');中引用的类样式名字，应根据自己定义的类样式名称选择。这样问题就解决了。

这我顺便给出怎么获得checkbox引用的值

 <script type="text/javascript">
     function restpwd(){ //jquery获取复选框值 
    	 var aidselect =[]; 
    	 $('input[name="aid"]:checked').each(function(){ 
    		 aidselect.push($(this).val()); //.val()不写数据是获得当前的内容，也就是获得value的值
    	 });     	    	 
    	 if(aidselect.length==0){
    		 alert("请至少选择一个选项！");
    		 return ;
    	 }else{
    		 var r = window.confirm("确定要重置密码吗？");
    		 var str=aidselect.toString();
    		 if(r){  			  
       		 
    		   $.ajax({        
    		     type: 'post',   
    		     url:"${pageContext.request.contextPath}/******",  
    		     //async:false,//不开启异步请求
    		     data :{ "aidselect":aidselect      //这里aidselect直接是数组，没有转成json格式     
    		     },
    		     success: function(result){  
    		      		var result="${success}";
    		      		alert(result);
    		     },        
    		     error: function(){      		          
    		     }   
    		   });             			 		 
        		 }    		 
    		 } 
    	 }
 </script>

Contrroller层接收数据

@RequestMapping(value="/initadminpassword" ,method = {RequestMethod.POST})
public String initAdminPassword(@RequestParam(value="aidselect[]") int[] aid,HttpServletRequest request,HttpSession session,HttpServletResponse response) throws IOException{
		List<Admin> lp=new ArrayList<Admin>();    //将权限对应的id封装到list集合后再封装进role类型集合传入后台
		for(int a:aid) {
			Admin admin=new Admin();
			admin.setAid(a);
			lp.add(admin);
		}
		boolean su=adminservice.initAdmin(lp);
		if(su){
			request.getSession().setAttribute("success", "密码修改成功，初始密码为 111");
		}else{
			request.getSession().setAttribute("success", "重置失败，数据异常！");
		}
		return "admin/admin_show";
		}

这里可以直接以数组的形式接收前台传过来的值。@RequestParam(value="aidselect[]) int[] aid注意括号里的格式，记得带value=""。