js 实现全选取消全选反选操作

最新推荐文章于 2024-04-02 19:39:43 发布

松红

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： web 項目

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/qq_39516150/article/details/99854300

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述
《直接上代碼》

checkbox

<script type="text/javascript">
	//全选/全不选
	function checkChange(param) {
	    //checkChange(this) this传过来的是 <input type="checkbox" onchange="checkChange(this)" id="checkAll">
		//console.log(param);
		var checked=param.checked;
		//全选返回的true 全不选返回的false
		//console.log(checked);
		hobbies.forEach(function (value) {
			value.checked = checked;
		});
	};
	/**
	 *为什么不把checkChange(param)这个函数放到window.onload里面呢？这里解释一下
	 * onload事件会在页面或图像加载完成后立即发生
	 * 由于HTML加载时代码是由上往下执行的，在HTML加载的时候，遇到function关键字,声明一个函数时，
	 * 就会在内存中开辟一个新空间来对函数进行存储，方便以后进行调用。
	 * 也就是说，当将把checkChange(param)这个函数放到window.onload里面的时候，需要页面加载完之后，才声明这个函数，也就意味着，当HTML
	 * 加载到<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>的时候
	 * window.load=function(){}里面的函数还没有被声明，这时候内存中找不到checkChange(param)这个函数，就会报函数undefined错误。
	 * */
window.onload=function () {
	//将hobby声明全局变量(不用var声明的变量默认是全局变量)
	hobbies = document.querySelectorAll("[name='hobby']");
	var CheckAll = document.getElementById('all');
	var UnCheckAll = document.getElementById('uncheck');
	var OtherCheck = document.getElementById('otherCheck');
	//全选
	CheckAll.onclick = function () {
		/*for(var i=0;i<hobbies.length;i++){
				hobbies[i].checked=true;
			};*/
		hobbies.forEach(function (value) {
			//value输出是 <input type="checkbox" name="hobby">
			//console.log(value);
			value.checked = true;
		});
	};
	//全不选
	UnCheckAll.onclick = function () {
		//遍历
		hobbies.forEach(function (value) {
			value.checked = false;
		});
	};
	//反选
	OtherCheck.onclick = function () {
		hobbies.forEach(function (value) {
			//选中状态时value.checked返回的是false 未选中状态时value.checked返回true
			//console.log(value.checked);
			value.checked = !value.checked;
		});
	};
}
</script>
</head>
<body>
	请选择你的爱好:<br/>
	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>
	<div id="div">
		<input type="checkbox" name="hobby">JAVA</input>
		<input type="checkbox" name="hobby">打篮球</input>
		<input type="checkbox" name="hobby">上网</input>
		<input type="checkbox" name="hobby">撩妹</input>
	</div>
	<div>
		<input type="button" id="all"  value="全选"/>
		<input type="button" id="uncheck" value="全不选"/>
		<input type="button" id="otherCheck" value="反选"/>
	</div>

</body>
</html>

松红

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js 实现全选取消全选反选操作

《直接上代碼》checkbox<script type="text/javascript"> //全选/全不选 function checkChange(param) { //checkChange(this) this传过来的是 <input type="checkbox" onchange="checkChange(this)" id="check...
复制链接

扫一扫