首页 Javascript正文

js如何实现全选,不选,反选?

启明SEO Javascript 2024-05-28 07:34:18 137 0

大家好,今天给大家分享一个《js实现全选,不选,反选》技巧,具体思路如下:

思路:1、获取元素。2、用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选。3、通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现全选,不选,反选</title>
<script>
window.onload=function()
{
    var CheckAll=document.getElementById('All');
    var UnCheck=document.getElementById('uncheck');
    var OtherCheck=document.getElementById('othercheck');
    var div=document.getElementById('div');
    var    CheckBox=div.getElementsByTagName('input');
    CheckAll.onclick=function(){
            for(i=0;i<CheckBox.length;i++){
                    CheckBox[i].checked=true;
                };
        };
    UnCheck.onclick=function(){
            for(i=0;i<CheckBox.length;i++){
                    CheckBox[i].checked=false;
                };
        };
    othercheck.onclick=function(){
            for(i=0;i<CheckBox.length;i++){
                    if(CheckBox[i].checked==true){
                            CheckBox[i].checked=false;
                        }
                    else{
                        CheckBox[i].checked=true
                        }
                    
                };
        };
};
</script>
</head>

<body>
<input type="button" id="All" value="全选" /><br />
<input type="button" id="uncheck" value="不选" /><br />
<input type="button" id="othercheck" value="反选" /><br />
<div id="div">
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
</div>
</body>
</html>

具体效果如下:

js如何实现全选,不选,反选?

评论

启明SEO微信

有什么问题欢迎添加微信咨询

好文推荐

实时访客入口页面出现bd_vid=标识是什么原因

实时访客入口页面出现bd_vid=标识是什么原因

最近查看百度实时访客,总是会看到入口页面会多......

有了微信视频号,但是没有发布权限,怎么开通

有了微信视频号,但是没有发布权限,怎么开通

视频号是微信在2020年1月19号开始内测的......

如何用python抓取爱企查企业信息

如何用python抓取爱企查企业信息

前段时间,经理让我去找一些企业的信息,我平常......

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

对于一般企业网站或者博客来说,对服务器的配置......

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

修改浏览指纹的方法其实也是很简单,主要使用到......

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

我遇到的问题是电脑原先安装过mysql,卸......