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

最新推荐文章于 2024-08-20 04:38:44 发布

原创最新推荐文章于 2024-08-20 04:38:44 发布 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

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 选择器的所有元素，返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始


var all = document.querySelector('.all .checkbox');
var checkboxs = document.querySelectorAll('.btns .checkbox')
var btns = document.querySelector('.btns');

2：事件触发:

知识点：事件监听函数

添加事件监听.addEventListener(事件类型，事件处理函数) 。

移除事件监听.removeEventListener(事件类型，事件处理函数)。

all.addEventListener('click', handlerClickAll);

btns.addEventListener('click', handlerClickOne);

3:单选按钮：

知识点：事件委托

事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

此时单个按钮checkbox的点击事件委托给了父元素btn,利用btn去监听checkbox的点击事件。

e = e || event:一种兼容写法。

e.target：target 事件属性可返回事件的目标节点（触发该事件的节点）

e.target.nodeName 　　//获取事件触发元素标签name（li,p...）

　　　　e.target.id　　　　　　　//获取事件触发元素id

　　　　e.target.className　　//获取事件触发元素类名

　　　　e.target.innerHTML　　//获取事件触发元素的内容

.getAttribute ：读取元素的属性值

.indexOf:字符串查找方法，没有找到对应匹配的字符返回-1

 function handlerClickOne(e) {
  
            e = e || event;
            // 返回元素节点
            var target = e.target;
            // 获取元素标签名 注意返回值是大写。
            if (target.nodeName === 'DIV') {
                if (target.getAttribute('class').indexOf('active') === -1) {
                    target.classList.add('active');
                } else {
                    target.classList.remove('active');
                }
            }
        }

4：多选按钮

 function handlerClickAll() {
            // 我们此时需要一个判断 : 
            // - all里面是否存在 active ; 
            // - 如果存在我们就删除active; 
            // - 如果不存在我们就添加active;

            // all.getAttribute("class") : 获取结果是字符串;
            // 用字符串方法indexOf 判断是否存在 active类名; 
            if (all.getAttribute('class').indexOf('active') === -1) {
                // 给all添加active类名;
                all.classList.add('active');
                // 遍历所有的checkbox元素; 
                for (var i = 0; i < checkboxs.length; i++) {
                    // 添加active类名;
                    checkboxs[i].classList.add('active');
                }   
            } else {
                // 删除active类名
                all.classList.remove('active');
                // 遍历所有的checkbox元素; 
                for (var i = 0; i < checkboxs.length; i++) {
                    // 删除active类名
                    checkboxs[i].classList.remove('active');
                }
            }
        }