bootstrap checkbox 添加checked属性全选/反选

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

屈想顺

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

阅读量6.8k

点赞数 2

分类专栏：前端文章标签： bootstrap checkbox 添加属性 checked

本文链接：https://blog.csdn.net/crazy__qu/article/details/74942092

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

${productList}后台传过来的产品集合,遍历集合会生成多个name属性为checkbox的input

				<div class="row">
					<div class="form-group">
						<div class="col-md-12">
							<label class="col-lg-2 control-label">产品:</label>
							<input id="selecteAll" type="checkbox" class="styled"/>全选/反选
							<div class="col-lg-12">
								<div class="row">
									<c:forEach items="${productList}" var="obj">
									<div class="col-md-2">
										<div class="checkbox">
											<label>
												<input id="${obj.id }" name="product" type="checkbox" class="styled">${obj.name }
											</label>
										</div>
									</div>
									</c:forEach>
								</div>
								
							</div>
						</div>
					</div>
				</div>

js代码:给生成的多个checkbox添加checked属性(相信这个肯定没有问题),但是添加属性之后其他的checkbox没有变化,其实这个属性已经添加上去,只是bootstrap控件没有改变属性(就是通过当前节点获取父节点,添加一个class属性,这个父节点是一个span标签,在浏览器中可以看到)

	$("#selecteAll").click(function(){
		if(this.checked){
			var products = $("input[name='product']");
			products.each(function(){
				$(this).attr('checked',true);
				$(this).parent().attr("class",'checked');
			});
		}else{
			var products = $("input[name='product']");
			products.each(function(){
				$(this).attr('checked',false);
				$(this).parent().removeClass('checked');
			});
		}
	});

获取输出值的时候会出现问题,会输出所有值,下面是输出值的控制

$("#button").click(function(){
		 var products;
		 var j = 0;
		 $("input[name='product']").each(function(){
			 var ischecked = $(this).parent().parent().find("span").attr("class");
			 if(j == 0 && ischecked=="checked"){
				 productTypes = $(this).val();
				 j++;
		 	 }else if(j != 0 && ischecked=="checked"){
		 		 productTypes += "," +($(this).val());
		 		 j++;
			 }
			 
		 });
	});