当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS全选与取消全选代码实现

JS全选与取消全选代码实现

2018年05月10日  | 移动技术网IT编程  | 我要评论

点击全选复选框，然后所有的复选框都选中，全选变成取消全选，点击取消全选复选框，然后所有的复选框都取消选中，今天我们用HTML中的JS代码实现下面是代码：

结果是:

<!DOCTYPE html>  
<html>  
<head>  
    <title>全选</title>  
    <script type="text/javascript">  
        function my(){  
            var is=document.getElementById('box');//获取全选的复选框  
            var em=is.checked;//判断复选框的选中状态    
            var iss=document.getElementsByName('box1');//下面所有的复选框  
            var ass=document.getElementById('as');  
            if(em){//如果全选复选框是false 则执行下面代码  
                for(var i=0;i<iss.length;i++){ //循环下面所有复选框,将所有复选框都选中  
                    iss[i].checked=true;    
                }  
                ass.innerHTML='取消全选';//选中后将SPAN中的内容改为取消全选  
            }else{  
                for(var i=0;i<iss.length;i++){  
                    iss[i].checked=false;  
                }  
                ass.innerHTML='全选';  
            }  
        }  
    </script>  
</head>  
<body>  
    <input type="checkbox" id="box" onclick="my()"><span id="as">全选</span>  
    <input type="checkbox" name="box1">学生  
    <input type="checkbox" name="box1">18  
    <input type="checkbox" name="box1">男  
    <input type="checkbox" name="box1">张三  
</body>  
</html>

\

\

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网