原生JS实现单选全选

最新推荐文章于 2024-05-11 17:09:17 发布

聂聂脸

最新推荐文章于 2024-05-11 17:09:17 发布

阅读量246

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_79420857/article/details/137740775

版权

文章介绍了如何在移动端应用中实现单选和全选功能，通过JavaScript的getElementById和getElementsByClassName方法操作DOM，同时推荐使用onchange事件而非onclick以保证更严谨的行为。

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

实现单全选，我们一般在移动端上，购物车勾选商品进行购买一般用到单全选。

实现全选

// 全选
function quanxuan() {
    let quan = document.getElementById("全选名");
    let ge = document.getElementsByClassName("单选名")
    for (let i = 0; i < ge.length; i++) {
        if (quan.checked == false) {
            ge[i].checked = false;
        } else {
            ge[i].checked = true;
        }
    }
}

实现单选

// 单选
function danxuan() {
    let quan = document.getElementById("全选名");
    let ge = document.getElementsByClassName("单选名")
    for (let i = 0; i < ge.length; i++) {
        if (ge[i].checked == false) {
            quan.checked = false;
            return;
        } else {
            quan.checked = true;
        }
    }
}

大部分使用的都是onclick事件，但其实严格一点来说，单全选的按钮使用使用onchange事件更好。