JS实现单选按钮和多选功能

最新推荐文章于 2024-07-30 22:36:34 发布

Can1997

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量5.4k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/Can1997/article/details/124183877

版权

本文详细介绍了如何使用JavaScript实现单选按钮和多选功能。通过CSS选择器获取DOM对象，如document.querySelector()和document.querySelectorAll()，并利用事件监听函数处理用户交互。在单选按钮部分，讲解了事件委托的概念，将单个按钮的点击事件委托给父元素，以减少事件监听。同时，还探讨了如何利用e.target获取触发事件的元素信息，包括标签名、ID、类名和内容，并结合getAttribute和indexOf方法进行属性值检查。

摘要由CSDN通过智能技术生成

HTML部分：

//容器
 <div class="container">

        <div class="all">
            全选<div class="checkbox"></div>
        </div>
        <div class="btns">
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
        </div>
    </div>

JS部分：

1：通过CSS选择器获取dom对象

知识点：CSS选择器

document.querySelector() 返回匹配指定选择器的第一个元素

document.querySelectorAll()返回文档中匹配指定 CSS 选择器的所有元素，返回

最低0.47元/天解锁文章

Can1997

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS实现单选按钮和多选功能

HTML部分：//容器 <div class="container"> <div class="all"> 全选<div class="checkbox"></div> </div> <div class="btns"> <div class="checkbox"></div> &lt
复制链接

扫一扫