JS做一个全选和取消全选案例

最新推荐文章于 2023-07-07 16:55:54 发布

前端小白=^=

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量674

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45992734/article/details/127073949

版权

本文介绍如何使用JavaScript实现全选和取消全选的功能。当点击全选按钮时，商品列表中的所有选项会被选中；取消全选则会清除所有选中状态。如果用户手动选择了部分商品，全选按钮将不会被选中。文中提供了实现这一功能的完整代码。

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

场景：当你点击全选时，商品列表全部选中，取消全选时，商品列表全部未选中。选择几件商品但没全选时，全选的复选框未选中。

全选：

选择部分商品：

1.全选

获取到元素，并且在全选上绑定一个事件，将商品的checked全部和全选框一样

var checkboxall = document.querySelector("#all")
        var shoplist = document.querySelectorAll(".shop input")
        checkboxall.onclick = function(){
            for(var i = 0;i<shoplist.length;i++){
                shoplist[i].checked = checkboxall.checked
            }
        }