全选、全不选、反选功能的实现

全选、全不选、反选

实现的功能是:
选中下面全选框,全部的框都会选中,反之就会全不选中;
当点击反选按钮时,选择框中的选框状态置反,选中的变为没选中,没选中变为选中
直接上代码:
index.html


<html>
	<head>
		<meta charset="UTF-8">
		<title>全选、全不选、反选title>
	head>
	<body>
		<form action="">
			<p>熊大p>
			<p>翠花p>
			<p>光头强p>
			<p>喜洋洋p>
		form>
		<button onclick="checkall(0)">全选button>
		<button onclick="checkall(1)">全不选button>
		<button onclick="checkall(2)">反选button>
		
		
		<script type="text/javascript">			
			let but = document.getElementsByTagName('button');
			let inp = document.getElementsByTagName('input');
			function checkall(num){
      
				for (let i = 0; i < inp.length; i++) {
      
					if (num == 0) {
      //全选
						inp[i].checked = true;
					}
					if (num == 1) {
      //全不选
						inp[i].checked = false;
					}
					if (num == 2) {
      //反选
						inp[i].checked = !inp[i].checked;
					}
				}	
			}
		script>
	body>
html>

效果如下:
全选、全不选、反选功能的实现_第1张图片

你可能感兴趣的:(前端,js,javascript,checkbox,css,html)