复选框实现全选和取消全选的效果

最新推荐文章于 2023-05-03 22:13:01 发布

酸霉汤

最新推荐文章于 2023-05-03 22:13:01 发布

阅读量248

点赞数

分类专栏： # JS 文章标签： Javascript 初级

本文链接：https://blog.csdn.net/iTaylorfan/article/details/103281704

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JS部分

function quanxuan(){                              //checked 选中返回true 否则返回false
    var INPUT=document.getElementsByTagName("input");

        for(var i=1;i<=INPUT.length;i++){        //注意i是从第一个子选项开始
            INPUT[i].checked=INPUT[0].checked;          //把第一个复选框的状态 给下面每个子选项
        }

}
function zixuanxiang() {
    var INPUT=document.getElementsByTagName("input");
   if((INPUT[1].checked==false)||INPUT[2].checked==false||INPUT[3].checked==false||INPUT[4].checked==false){  //有一个子选项没选中则全选框就不被选中
       INPUT[0].checked=false;
   }
    if((INPUT[1].checked==true)&&INPUT[2].checked==true&&INPUT[3].checked==true&&INPUT[4].checked==true){
        INPUT[0].checked=true;  //当子选项全被选中时则全选框被选中      
    }
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框全选的操作</title>
    <script src="js/checkbox.js"></script>
</head>
<body>
<div>
    <table>  <!-- style="width: 100px;height: 200px;border:1px solid red;"-->
        <tr>
            <td><input type="checkbox" onchange="quanxuan()">全选</td>
        </tr>
        <tr>
            <td><input type="checkbox" onchange="zixuanxiang()">1</td>
        </tr>
        <tr>
            <td><input type="checkbox" onchange="zixuanxiang()">2</td>
        </tr>
        <tr>
            <td><input type="checkbox" onchange="zixuanxiang()">3</td>
        </tr>
        <tr>
            <td><input type="checkbox" onchange="zixuanxiang()">4</td>
        </tr>
    </table>
</div>
</body>
</html>