试题：原生JS实现的全选/全不选，点行可选中取消

最新推荐文章于 2023-02-21 15:38:18 发布

zhanglujie2008

最新推荐文章于 2023-02-21 15:38:18 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhanglujie2008/article/details/12566153

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面中有如下几个复选框，请完成全选/全不选功能。

<INPUT name="isAll" type="checkbox"id="isAll" value="" οnclick=“checkAll();”/>全选/全不选

<INPUT name="items" type="checkbox"οnclick="itemcheck()"/>原生JS实现的全选/全不选，点行可选中取消

<INPUT name="items" type="checkbox"οnclick="itemcheck()"/>原生JS实现的全选/全不选，点行可选中取消<INPUT name="items" type="checkbox" οnclick="itemcheck()"/>原生JS实现的全选/全不选，点行可选中取消

<html>
<body>
<INPUT name="isAll" type="checkbox" id="isAll" value="" οnclick="checkAll();"/>全选/全不选
<INPUT name="items" type="checkbox" οnclick="itemcheck()"/>原生JS实现的全选/全不选，点行可选中取消
<INPUT name="items" type="checkbox" οnclick="itemcheck()"/>原生JS实现的全选/全不选，点行可选中取消
<INPUT name="items" type="checkbox" οnclick="itemcheck()"/>
</body>
</html>


<script language="javascript"> 
function checkAll(){
var isAll=false;
var obj = document.getElementsByTagName('input');
var isAllChk = document.getElementById('isAll').checked;
	for(var i=0;i<obj.length;i++){
		if(isAllChk){
			obj[i].checked=true;
		}else{
			obj[i].checked=false;
		}
	} 
}
function itemcheck(){
//是否至少有一个被选中
var is_oneCheck = false;
//是否至少有一个未被选中
var is_oneNoCheck = false;
var obj = document.getElementsByTagName('input');
var isAllChk = document.getElementById('isAll').checked;
for(var i=0;i<obj.length;i++){
        if(obj[i].id!='isAll'){
			if(obj[i].checked){
			  is_oneCheck = true;
			}else{
			  is_oneNoCheck = true;
			}
		}
}
if(is_oneCheck&&is_oneNoCheck){
document.getElementById('isAll').checked = false;
}else if(is_oneCheck&&!is_oneNoCheck){
document.getElementById('isAll').checked = true;
}if(!is_oneCheck&&is_oneNoCheck){
document.getElementById('isAll').checked = false;
}


 

}
</script>

zhanglujie2008

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
试题：原生JS实现的全选/全不选，点行可选中取消

页面中有如下几个复选框，请完成全选/全不选功能。全选/全不选原生JS实现的全选/全不选，点行可选中取消原生JS实现的全选/全不选，点行可选中取消原生JS实现的全选/全不选，点行可选中取消全选/全不选原生JS实现的全选/全不选，点行可选中取消原生JS实现的全选/全不选，点行可选中取消 function checkAll(){var isAll=false;
复制链接

扫一扫