实现组件全选和单选功能

最新推荐文章于 2022-06-16 15:16:27 发布

柠檬布丁^O^

最新推荐文章于 2022-06-16 15:16:27 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_41805715/article/details/84989096

JavaScript 专栏收录该内容

36 篇文章

订阅专栏

原生js方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table tr{
			height: 30px;
			line-height: 30px;
		}
		table tr td{
			width: 80px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td><input type="checkbox" onclick="checkAll(this)"></td>
			<td>姓名</td>
			<td>年龄</td>
			<td>职业</td>
		</tr>
		<tr>
			<td><input type="checkbox" onclick="checkOne()"></td>
			<td>小明</td>
			<td>18</td>
			<td>学生</td>
		</tr>
		<tr>
			<td><input type="checkbox" onclick="checkOne()"></td>
			<td>小黄</td>
			<td>25</td>
			<td>医生</td>
		</tr>
		<tr>
			<td><input type="checkbox" onclick="checkOne()"></td>
			<td>小蓝</td>
			<td>28</td>
			<td>律师</td>
		</tr>
	</table>
	<script>
		function checkAll(obj){
			var lis=document.querySelectorAll("td input");
			//遍历所有子选项将状态和全选状态保持一致
			for(var i=1;i<lis.length;i++){
				lis[i].checked=obj.checked;
			}
		}
		function checkOne(){
			var num=0;
			var lis=document.querySelectorAll("td input");
			//遍历子选项中选中的个数，如果全选中，就将全选的状态设置为true，有一个未选中全选的状态就为false
			for(var i=1;i<lis.length;i++){
				if(lis[i].checked){
					num++;
				}
			}
			if(num==lis.length-1){
				lis[0].checked=true;
			}else{
				lis[0].checked=false;
			}
		}
	</script>
</body>
</html>

vue实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		table tr{
			height: 30px;
			line-height: 30px;
		}
		table tr td{
			width: 80px;
		}
	</style>
</head>
<body>
<div id="app">
<table>
	<tr>
		<td><input type="checkbox" @click="checkAll()" :checked="checkedBox.length===person.length"></td>
		<td>姓名</td>
		<td>年龄</td>
		<td>职位</td>
	</tr>
	<tr v-if="person.length>0" v-for="(item,index) in person" :key="index">
		<td><input type="checkbox" :checked="checkedBox.indexOf(item.id)>=0" @click=checkOne(item.id)></td>
		<td>{{item.name}}</td>
		<td>{{item.age}}</td>
		<td>{{item.position}}</td>
	</tr>
	<tr v-if="person.length === 0">
        <td colspan="4">暂无数据</td>
    </tr>
</table>
</div>
<script>
//解决思路：操作数组，把所有子选项选中的放到一个数组里面，如果数组的长度等于数据长度，全选状态为true，如果数组中有选中的子选项时，再点击的时候就需要去掉。全部不选中的状态要把数组清空。
new Vue({
	el:'#app',
	data:{
		person:[
			{id:'1',name:'小明',age:'19',position:'student'},
			{id:'2',name:'小黄',age:'20',position:'teacher'},
			{id:'3',name:'小蓝',age:'18',position:'student'}
		],
		isCheckedAll:false,
		checkedBox:[]
	},
	methods:{
		checkAll() {
			this.isCheckedAll=!this.isCheckedAll;
			if(this.isCheckedAll){
				this.checkedBox=[];
				for(var i=0;i<this.person.length;i++){
					this.checkedBox.push(this.person[i].id);
				}
				console.log(this.checkedBox);
			}else{
				this.checkedBox=[];
			}
		},
		checkOne(id) {
			var idIndex=this.checkedBox.indexOf(id);
			if(idIndex>=0){
				this.checkedBox.splice(idIndex,1);
			}else{
				this.checkedBox.push(id);
			}
		}
	}
})
</script>
</body>
</html>