采用dom实现复选框全选、取消效果

最新推荐文章于 2021-09-01 23:15:17 发布

小田同學

最新推荐文章于 2021-09-01 23:15:17 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： dom 复选框

本文链接：https://blog.youkuaiyun.com/Sabrina_TSM/article/details/51245161

版权

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个简单的HTML表单示例介绍了如何使用JavaScript实现表单中复选框的全选与全不选功能。当点击全选按钮时，所有兴趣选项的复选框都会被选中或取消选中，实现了用户界面与脚本逻辑的基本互动。

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

<form action="">
    爱好：<br/>
    <input type="checkbox" id="all">全选<br/>
    <input type="checkbox"  name="hobby" value="唱歌">唱歌
    <input type="checkbox"  name="hobby" value="跳舞">跳舞
    <input type="checkbox"  name="hobby" value="学习">学习
    <input type="checkbox"  name="hobby" value="玩耍">玩耍<br/>
    <button id="choice" value="选择">选择</button>
</form>

<script>
window.onload = function(){
    document.getElementById("all").addEventListener("click",function(){
        var a = document.getElementById("all");
        var b = document.getElementsByName("hobby");
        for(var i=0;i< b.length;i++) {
            b[i].checked = a.checked;
        }
    },false)
}

</script>