2021-07-07一键全选和全不选

一键全选和全不选

如图所示，点击【良好】的复选框实现：【优秀】下的清除选中状态，【良好】下的状态选中

css代码：

.check{
			background: url(/qlc/static/images/duihao.png) no-repeat center;
		}

html代码：

<tbody id = "mainbody">
<tr>
		<td class="tdbk" colspan="5">领导测评—市局机关</td>
	</tr>
	<tr>
		<td class="tdbk">序号</td>
		<td class="tdbk">测评对象</td>
		<td class="tdbk">优秀&nbsp;&nbsp;&nbsp;
			<span><input type="checkbox" @click="selectedAll($event,'1')"  name="checkBtn" id="check_1"/></span>
		</td>
		<td class="tdbk">良好&nbsp;&nbsp;&nbsp;
			<span><input type="checkbox" @click="selectedAll($event,'2')" name="checkBtn" id="check_2"/></span>
		</td>
		<td class="tdbk">合格&nbsp;&nbsp;&nbsp;
			<span><input type="checkbox" @click="selectedAll($event,'3')" name="checkBtn" id="check_3"/></span>
		</td>
	</tr>
	<tr v-for="(cpdx,index) in cpdxList">
		<td class="tdbk">{{index+1}}</td>
		<td class="tdbk">{{clean(cpdx.MC)}}</td>
		<td align="center" :id="clean(cpdx.ID)+'~1'" :name="clean(cpdx.ID)" @click="getCheck($event)"></td>
		<td align="center" :id="clean(cpdx.ID)+'~2'" :name="clean(cpdx.ID)" @click="getCheck($event)"></td>
		<td align="center" :id="clean(cpdx.ID)+'~3'" :name="clean(cpdx.ID)" @click="getCheck($event)"></td>
	</tr>
</tbody>

js代码：

getCheck(e){//此函数是实现单个点击选中以及横向互斥（上篇文章提到过）
	$(e.target).attr("class");
		var classStyle = clean($(e.target).attr("class"));
		var id = $(e.target).attr("id"); 
		var dxid = id.split("~")[0];
		var level = id.split("~")[1];
		if(classStyle.includes("check")){//说明选中了
			$(e.target).attr("class","");
			fVue.mxList.forEach(function(mx){
				if(clean(mx.CPDX_ID) == dxid){
					mx.GRADE_LEVEL = ""; 
				}	
			});
		}else{//说明没选中
			for(var i = 0; i < fVue.mxList.length; i++) {
				var mx = fVue.mxList[i]; 
				if(clean(mx.CPDX_ID) == dxid){
					mx.GRADE_LEVEL = level; 
					$(e.target).attr("class","check");
					$("td[name='"+dxid+"']").each(function(i){
						if(id != $(this).attr("id")){
							$(this).attr("class","");	
						}
					});
				}
			}	
		}
},
 selectedAll(e,lx){
	//点击复选框为选中状态
	if($(e.target).prop('checked')){
		$("input[name='checkBtn']").each(function(i){//修改复选框的选中状态，有一个选中，其他的都不选中
			if(("check_"+lx) != $(this).attr("id")){
				$(this).prop("checked",false);	
			}
		});
		for(var i = 0; i < fVue.mxList.length; i++) {//修改复选框控制下的单元格的状态（选中）
			var mx = fVue.mxList[i];
			mx.GRADE_LEVEL = lx; 
			document.getElementById((clean(mx.CPDX_ID)+'~'+lx)).classList.add("check");
			$("td[name='"+clean(mx.CPDX_ID)+"']").each(function(i){//横向互斥
				if((clean(mx.CPDX_ID)+'~'+lx) != $(this).attr("id")){
					$(this).attr("class","");	
				}
			});
		}	
	}else{点击复选框取消选中状态
		for(var i = 0; i < fVue.mxList.length; i++) {//修改复选框控制下的单元格的状态（取消）
			var mx = fVue.mxList[i];
			mx.GRADE_LEVEL = "";
			document.getElementById((clean(mx.CPDX_ID)+'~'+lx)).classList.remove("check");
		}	
	}
},