实现全选反选删除功能

fizz141242

于 2021-05-27 11:06:50 发布

阅读量126

点赞数

分类专栏：全选反选文章标签： javascript css3 html

本文链接：https://blog.csdn.net/fizz141242/article/details/117324203

版权

全选反选专栏收录该内容

1 篇文章 0 订阅

订阅专栏

不太会描述就直接上代码吧！！！`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul {
            margin-left: 30px;
            margin-top: 30px;
        }
        ul li {
            margin-top: 10px;
        }
        button {
            margin-left: 30px;
            margin-top: 30px;
        }
        .input {
            margin-left: 30px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <input type="checkbox" name="" id="">&nbsp;潮汐海灵-菲兹
        </li>
        <li>
            <input type="checkbox" name="" id="">&nbsp;发条魔灵-奥丽安娜
        </li>
        <li>
            <input type="checkbox" name="" id="">&nbsp;光辉女神-拉克丝
        </li>
        <li>
            <input type="checkbox" name="" id="">&nbsp;德玛西亚之力-盖伦
        </li>
        <li>
            <input type="checkbox" name="" id="">&nbsp;德玛西亚皇子-嘉文四世
        </li>
        <li>
            <input type="checkbox" name="" id="">&nbsp;迅捷斥候-提莫
        </li>
    </ul>
    <button>全选</button>
    <button>反选</button>
    <button>取消选择</button>
    <button>删除</button>
    <script>
        let input = document.querySelectorAll('ul li input')//获取到所有input
        let checkAll = document.getElementsByTagName('button')[0];//取到全选button按钮
        let inverse = document.getElementsByTagName('button')[1];//取到反选button按钮
        let cancel = document.getElementsByTagName('button')[2];//取到取消选择button按钮
        let cutOut = document.getElementsByTagName('button')[3]//取到删除button按钮
        // 全选的时候 循环遍历input 
        checkAll.onclick = () => {
            for (let i = 0; i < input.length; i++) {
                input[i].checked = true;
            }
        }
        //取消选择的时候 与全选同理
        cancel.onclick = () => {
            for (let i = 0; i < input.length; i++) {
                input[i].checked = false;
            }
        }
        //反选的时候 实现开关灯效果 取反
        inverse.onclick = () => {
            for (let i = 0; i < input.length; i++) {
                input[i].checked = !input[i].checked;
            }
        }
        //删除 循环遍历 获取到选中的元素的父节点 
        cutOut.onclick = () => {
            for (let i = 0; i < input.length; i++) {
                if (input[i].checked == true) {
                    input[i].parentNode.remove()
                }
            }
        }
    </script>
</body>
</html>

fizz141242

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现全选反选删除功能

不太会描述就直接上代码吧！！！`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫

专栏目录