js 表单全选和取消全选

最新推荐文章于 2022-03-08 17:55:18 发布

原创最新推荐文章于 2022-03-08 17:55:18 发布 · 559 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #checkbox #dom

笔记专栏收录该内容

6 篇文章

订阅专栏

博客围绕JS、Checkbox和DOM展开，虽未给出具体内容，但推测是关于使用JavaScript对Checkbox元素进行DOM操作的相关知识，如元素的选择、属性修改等信息技术内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单全选</title>
    <style>

    </style>
</head>
<body>

    <input type="checkbox" id="checkElt" onclick="checkAllOrCancleAll()"> 
    <span id="checkAllOrNot">全选</span>
    <br/>
    运动<input type="checkbox" name="interest" value="sport" /><br>
    旅游<input type="checkbox" name="interest" value="travel" /><br>
    美食<input type="checkbox" name="interest" value="food" /><br>
    音乐<input type="checkbox" name="interest" value="music" /><br>

    <script>
        function checkAllOrCancleAll(){

            //获取全选按钮
            var checkElt = document.getElementById('checkElt');

            //获取选中状态
            var checked = checkElt.checked;

            //获取所有复选框
            var allInterests = document.getElementsByName("interest");

            //获取【全选】 文本
            var checkAllOrNot = document.getElementById('checkAllOrNot');

            if(checked){
                for(var i=0;i<allInterests.length;i++){
                    allInterests[i].checked=true;
                }     
                checkAllOrNot.innerHTML('取消全选');          

            }else{
                for(var i=0;i<allInterests.length;i++){
                    allInterests[i].checked=false;
                }  
                checkAllOrNot.innerHTML('全选');  

            }

        }


    </script>
</body>
</html>

全选按钮