本文主要是介绍JS小实例笔记三——全选、反选、全不选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
JS小实例笔记三——全选、反选、全不选及优化
首先要了解选中的三种形式
①.用户手动点击勾选
②.标签中写的checked
③.JS操作dom
图示如下：
创建文件demo.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全选、反选、全不选</title>
</head><body><form action=""><p><input type="checkbox" name="" id="">A</p><p><input type="checkbox" name="" id="">B</p><p><input type="checkbox" name="" id="">C</p><p><input type="checkbox" name="" id="">D</p></form><button>全选</button><button>反选</button><button>全不选</button>
</body></html>
<!-- 选中的三种形式①.用户手动点击勾选②.标签中写的checked③.JS操作dom -->
<script>let button = document.getElementsByTagName('button');let input = document.getElementsByTagName('input');//全选button[0].onclick = function() {for (let i = 0; i < input.length; i++) {input[i].checked = true;}};//反选button[1].onclick = function() {for (let i = 0; i < input.length; i++) {input[i].checked = !input[i].checked;}};//全不选button[2].onclick = function() {for (let i = 0; i < input.length; i++) {input[i].checked = false;}}
</script>文件demo.html的优化
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全选、反选、全不选</title>
</head><body><form action=""><p><input type="checkbox" name="" id="">A</p><p><input type="checkbox" name="" id="">B</p><p><input type="checkbox" name="" id="">C</p><p><input type="checkbox" name="" id="">D</p></form><button onclick="getAll(0)">全选</button><button onclick="getAll(1)">反选</button><button onclick="getAll(2)">全不选</button>
</body></html>
<!-- 选中的三种形式①.用户手动点击勾选②.标签中写的checked③.JS操作dom -->
<script>let button = document.getElementsByTagName('button');let input = document.getElementsByTagName('input');//重复内容可以进行封装。这里封装为函数，进行优化function getAll(num) {for (let i = 0; i < input.length; i++) {if (num == 0) {input[i].checked = true;} else if (num == 1) {input[i].checked = !input[i].checked;} else {input[i].checked = false;}}}
</script>这篇关于JS小实例笔记三——全选、反选、全不选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
