用JavaScript实现复选框的全选、全不选以及反选操作！

演示图片如下：

起始页面效果图

全选页面效果图

全不选页面效果图

反选页面效果图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全选、全不选以及反选操作</title>
</head>
<body>
	<table>
    <tr><th>操作</th><th>编号</th><th>图书名称</th><th>价格</th></tr>
    <tr>
        <td><input type="checkbox" name="books"></td>
        <td>1</td><td>《JavaScript前端开发教程》</td><td>39.90RMB</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="books"></td>
        <td>2</td><td>《Java Web应用开教程》</td><td>78.90RMB</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="books"></td>
        <td>3</td><td>《Java从入门到精通》</td><td>30.90RMB</td>
    </tr>
    <tr><td colspan="4">
            <input id="checkAll" type="button" value="全选" onclick="checkAll()">  //在这里添加按钮以及鼠标事件；
            <input id="checkNone" type="button" value="全不选" onclick="checkNone()">
            <input id="checkInvert" type="button" value="反选" onclick="checkInvert()">
        </td>
	</tr>
	</table>
	
	<script>
		var check=document.getElementsByName("books");//获取复选框的名称；
    	function checkAll(){ 			//全选；
			for(var i=0;i<check.length;i++){
				check[i].checked=true; 
			}
		}	
		
		function checkNone(){ 			//全不选；
			for(var i=0;i<check.length;i++){
				check[i].checked=false; 
			}
		}
		
		function checkInvert(){ 		//反选；
			for (var i = 0; i < check.length; i++){
                if (check[i].checked == false)
                    check[i].checked = true;
                else{
                    check[i].checked = false;
				}
            }
		}	
	</script>
</body>
</html>

这是在下的第一篇博客，这个题目来自于我的老师布置给我的一个作业题！
希望大家多多关照！

原文链接：https://blog.csdn.net/weixin_43412704/article/details/103121781