关闭

原生js实现全选全部选

标签: js原生实现全选全部选js实现全选和反选js 实现全选全不选checkbox
706人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" id="btn1" value="selectAll"/>
<input type="button" id="btn2" value="noSelect"/>
<input type="button" id="btn3" value="UnSelect"/>
<p></p>
    <div id="input1">
        <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>
<script>
    window.onload=function(){
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        var div1=document.getElementById("input1");
        var inputChebox=div1.getElementsByTagName("input");
        btn1.onclick= function () {
            for(var i=0;i<inputChebox.length;i++){
                inputChebox[i].checked=true;
            }
        };
        btn2.onclick= function () {
            for(var i=0;i<inputChebox.length;i++){
                inputChebox[i].checked=false;
            }
        };
        btn3.onclick= function () {
           for(var i=0;i<inputChebox.length;i++){
               if(inputChebox.checked==true){
                   inputChebox[i].checked=false;
               }else{
                   inputChebox[i].checked=true;
               }
           }
        }
    }
</script>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:67411次
    • 积分:1511
    • 等级:
    • 排名:千里之外
    • 原创:82篇
    • 转载:20篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论