${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++; } }); });
