穿梭门穿梭框带checkbox复选框选中todolist 两个框 jqueryb版本

有两把刷子

已于 2023-10-30 10:57:48 修改

阅读量561

点赞数 1

分类专栏：小案例、小demo 文章标签： html5 css3 css html es6

于 2021-07-29 11:34:24 首次发布

本文链接：https://blog.csdn.net/qq_54753561/article/details/119207527

版权

小案例、小demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现思路

1.   在页面头部引入了一些外部的样式和脚本文件，jQuery。

2.   定义了一个数组obj，用于存储列表项的数据。每个列表项包含一个布尔值bool和一个内容cont。

3.   定义了一个render函数，用于渲染列表。函数首先清空所有的ul元素，然后根据obj数组的数据动态生成列表项，并根据布尔值将列表项添加到左边或右边的ul元素中。最后，更新左右两个列表的信息数量，并通过slideDown方法显示列表项。

4.   在页面加载时，调用render函数进行初始渲染。

5.   给左边列表的复选框添加点击事件监听器，当点击复选框时，根据data-id属性获取对应的索引值，然后将obj数组中对应索引的布尔值设置为false，表示该列表项在右边。

6.   给右边的">"按钮添加点击事件监听器，当点击按钮时，将左边的全选复选框取消选中，并调用render函数进行渲染。

7.   给右边列表的复选框添加点击事件监听器，当点击复选框时，根据data-id属性获取对应的索引值，然后将obj数组中对应索引的布尔值设置为true，表示该列表项在左边。

8.   给左边的"<"按钮添加点击事件监听器，当点击按钮时，将右边的全选复选框取消选中，并调用render函数进行渲染。

9.   给左边和右边的全选复选框添加点击事件监听器，当点击复选框时，遍历obj数组，将所有列表项的布尔值设置为相应的值。

10.   定义了一个fn函数，用于封装两边全选反选的功能。函数接受两个参数，分别是全选复选框和列表项复选框的选择器。在函数内部，给全选复选框添加点击事件监听器，当点击全选复选框时，根据全选复选框的状态设置列表项复选框的

code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Welcome to Vue</title>
</head>
<style>
    body {
        padding: 20px 100px;
    }

    #lapp,
    #rapp {
        width: 350px;
        height: 500px;
        background-color: #ccc;
        float: left;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
    }

    li {
        list-style: none;
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-left: 10px;
        /* background-color: red; */
        display: none;
    }

    .btnBox {
        float: left;
        height: 500px;
        width: 100px;
        display: flex;
        align-items: center;

    }

    button {
        width: 100%;
        height: 40px;
    }

    input {
        width: 18px;
        height: 18px;
    }

    u {
        float: right;
        text-decoration: none;
        color: red;
    }
    footer{
        position: absolute;
        right: 20%;
        top: 40%;
    }
</style>

<body>
    <div id="lapp">
        <input class="allsunleft" type="checkbox">全选
        <u class="letu">信息数量：0</u>
        <hr>
        <ul class="ltul">
            <!-- <li><input type="checkbox"><span>：达瓦达瓦大</span></li> -->
        </ul>

    </div>
    <div class="btnBox">
        <button class="letfBtn">
            <</button>


                <button class="rBtnight">></button>
    </div>

    <div id="rapp">
        <input class="allsunright" type="checkbox">全选
        <u class="letu2">信息数量：0</u>
        <hr>

        <ul class="ltul2">
            <!-- <li><input type="checkbox"><span>：达瓦达瓦大</span></li> -->
        </ul>
    </div>

    <footer>
        <h1>孙<br>志<br>豪</h1>
            <h5>穿梭门</h5>
    </footer>
</body>
<script src="./js/jquery-1.12.3.js"></script>   <!--jQuery 引入依赖jqy  -->
<script>
    var obj = [{
        bool: true,
        cont: "志豪你好啊帅哥1"
    },
    {
        bool: true,
        cont: "志豪你好啊帅哥2"
    },
    {
        bool: true,
        cont: "志豪你好啊帅哥3"
    },
    {
        bool: false,
        cont: "志豪你好啊帅哥4"
    },
    {
        bool: false,
        cont: "志豪你好啊帅哥5"
    },
     {
        bool: true,
        cont: "志豪你好啊帅哥6"
    },
    ]

    function render() {
        $('ul').empty()

        obj.forEach((element, i) => {
            if (element.bool == true) {  
                $('.ltul').append(`               
                <li data-id="${i}" ><input class="fxleft" type="checkbox"><span>：${element.cont}</span></li>
                `)
            } else if (element.bool == false) {
                $('.ltul2').append(`
                <li data-id="${i}"><input class="fxright"  type="checkbox"><span>：${element.cont}</span></li>
                `)
            }

        });
        $('.letu').html(`信息数量：${$('.ltul li').length}`)
        $('.letu2').html(`信息数量：${$('.ltul2 li').length}`)
        console.log( $('.ltul2 li').length)
        $('li').slideDown()
    }
    render()

    $('.ltul').on('click', 'input', function () {  //左边的
        let index = $(this).parent().data('id')
        console.log(index);
        obj[index].bool = false
    })
    $('.rBtnight').click(function () {
        $('.allsunleft').prop('checked',false)
        render()
    })

    $('.ltul2').on('click', 'input', function () {  //右边的边的
        let index = $(this).parent().data('id')
        console.log(index);
        obj[index].bool = true
    })

    $('.letfBtn').click(function () {
        $('.allsunright').prop('checked',false)
        render()
    })

    $('.allsunleft').click(function () {  //全选left
        obj.forEach(function (e) {
            e.bool = false
        })
    })
    $('.allsunright').click(function () {  //全选right
        obj.forEach(function (e) {
            e.bool = true
        })
    })


    function fn(a, b) {   //   两边全选反选 封装
        $(a).click(function () {
            $(b).prop('checked', $(this).prop('checked'))
        })
        $('ul').on('click', $(b), function () {  //右边的边的
            if ($(`${b}:checked`).length == $(b).length) {
                $(a).prop('checked', true)
            } else {
                $(a).prop('checked', false)
            }
        })
    }
    fn('.allsunleft', '.fxleft')
    fn('.allsunright', '.fxright')




</script>

</html>