用js实现全选和取消全选的功能

最新推荐文章于 2024-04-07 09:49:21 发布

noobman

最新推荐文章于 2024-04-07 09:49:21 发布

阅读量412

点赞数

原文链接：https://blog.csdn.net/jiaowohaohao/article/details/81637316

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" id="chkAll" name="chkAll" onclick="chkAll_onclick(this)" />全选
<div id="div1">
    <input type="checkbox" id="chk1" name="chk" onclick="chk_onclick(this)"/>1
    <input type="checkbox" id="chk2" name="chk" onclick="chk_onclick(this)" />2
    <input type="checkbox" id="chk3" name="chk" onclick="chk_onclick(this)" />3
    <input type="checkbox" id="chk4" name="chk" onclick="chk_onclick(this)"/>4
    <input type="checkbox" id="chk5" name="chk" onclick="chk_onclick(this)"/>5
</div>
<script>
    function chkAll_onclick(obj)
    {
        var chks = document.getElementsByName("chk");
        for( var i = 0 ; i < chks.length ; i++ )
        {
            chks[i].checked = obj.checked;
        }
    }
    function chk_onclick(obj)
    {
        var chks = document.getElementsByName("chk");
        var	chkAll=document.getElementsByName("chkAll");
        if(obj.checked==false)
            chkAll[0].checked=false;
        else
        {
            var j=1;
            for( var i = 0 ; i < chks.length ; i++ )
            {
                if(chks[i].checked==false)
                {   j=2;
                    break;
                }
            }
            if (j==1)
                chkAll[0].checked=true;
        }
    }
</script>
</body>
</html>