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

最新推荐文章于 2022-04-19 10:55:12 发布

不死宅少

最新推荐文章于 2022-04-19 10:55:12 发布

阅读量445

点赞数 1

分类专栏：前端开发文章标签： JavaScript 复选框鼠标事件

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

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用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>

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

不死宅少

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现复选框的全选、全不选以及反选操作！

**用JavaScript实现复选框的全选、全不选以及反选操作！演示图片如下：起始页面效果图全选页面效果图全不选页面效果图反选页面效果图<!doctype html><html><head><meta charset="utf-8"><title>全选、全不选以及反选操作</title>&lt...
复制链接

扫一扫

专栏目录