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

叁歲伎倆 2022-06-12 00:44 221阅读 0赞

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

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