vue.js单选全选删除

我不是女神ヾ 2021-06-26 16:06 457阅读 0赞

## index.html ##

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> vue.js单选全选删除 </title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="vueBox"> <div class="music_list" v-for="(item,index) in music_list"> <input type="checkbox" class="check_box" :id="'id'+item.id" :value="item.id" v-model="checkedNames"> <label :for="'id'+item.id" class="title"> { { item.tit}} </label> </div>  <div class="footer"> <div class="all_checked"> <input type="checkbox" id="allChecked" :checked="checkedNames.length===music_list.length" @click="allChecked"> <label for="allChecked" class="title"> 全选/全不选 </label> </div> <div class="checked_list"> 已选择的ID { { checkedNames}} </div> </div> <div class="delete" @click="deleteMusic"> 删除 </div> </div> <script src="js/vue.min.js"> </script> <script src="js/vue.index.js"> </script> </body> </html>

## vue.index.js ##

var vm = new Vue({
        el: ".vueBox",
        data: {
            checkedNames: [],
            music_list: [],
            all_cheched: false,
        },
        computed: {
    
    },
        created: function() { 
    
    },
        mounted: function() { 
            this.getMusic();
        },
        methods: {
            allChecked: function() { 
                if (this.checkedNames.length === this.music_list.length) {
                    // 全不选
                    this.checkedNames = [];
    
                } else {
                    this.checkedNames = [];
                    // 全选
                    this.music_list.forEach((item) = >{
                        this.checkedNames.push(item.id); // 与checkbox的value统一
                    })
                }
            },
            getMusic: function() { 
                var music_list = [{
                    "cov": "http://img1.kuwo.cn/star/starheads/240/34/11/220267175.jpg",
                    "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n3/192/19/57/297064714.mp3",
                    "tit": "独自去偷欢-刘德华",
                    "lrcUrl": "audio/lrc/dzqth.lrc",
                    "id": 'dzqth'
                },
                {
                    "cov": "http://img4.kuwo.cn/star/starheads/240/61/54/2102134023.jpg",
                    "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n2/192/69/30/1696331887.mp3",
                    "tit": "头发乱了-张学友",
                    "lrcUrl": "audio/lrc/tfll.lrc",
                    "id": 'tfll'
                },
                {
                    "cov": "http://star.kuwo.cn/star/starheads/180/44/10/3787691319.jpg",
                    "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n1/192/23/45/2735055960.mp3",
                    "tit": "浮夸-陈奕迅",
                    "lrcUrl": "audio/lrc/fk.lrc",
                    "id": 'fk'
                },
                {
                    "cov": "http://img4.kuwo.cn/star/starheads/240/1/0/3016067007.jpg",
                    "voi": "http://other.web.rf01.sycdn.kuwo.cn/resource/n2/66/79/3849065227.mp3",
                    "tit": "匆匆那年-王菲",
                    "lrcUrl": "audio/lrc/ccnn.lrc",
                    "id": 'ccnn'
                },
                {
                    "cov": "http://img2.kuwo.cn/star/starheads/240/70/47/1808655553.jpg",
                    "voi": "http://other.web.rb01.sycdn.kuwo.cn/resource/n3/28/23/4233584092.mp3",
                    "tit": "爱久见人心-梁静茹",
                    "lrcUrl": "audio/lrc/ajjrx.lrc",
                    "id": 'ajjrx'
                },
                {
                    "cov": "http://img2.kuwo.cn/star/starheads/240/71/48/2963446299.jpg",
                    "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n2/192/11/54/2132876119.mp3",
                    "tit": "后来-刘若英",
                    "lrcUrl": "audio/lrc/hl.lrc",
                    "id": 'hl'
                }];
                this.music_list = music_list
            },
            deleteMusic: function() { 
                var music_list = this.music_list;
                var checkedNames = this.checkedNames;
                /*循环查找选中项*/
                checkedNames.forEach(function(item, index) { 
                    music_list.forEach(function(music, i) { 
                        if (music.id == item) {
                            music_list.splice(i, 1);
                        }
                    });
                }) this.music_list = music_list;
                this.checkedNames = []
            }
        }
    
    });

## style.css ##

/* css reset */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, a, input, button, p,img,span { margin: 0; padding: 0; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    
    ol, ul, li { list-style: none; }
    
    a { text-decoration: none; }
    
    
    .music_list ,.all_checked { position: relative; width: 100%; padding: 5px; margin-top: 5px; display: flex; align-items: center; }
    
    .title { margin-left: 10px; }
    
    .checked_list { width: 100%; padding: 5px; margin-top: 5px; display: flex; align-items: center; }
    
    .delete { width: 200px; text-align: center; padding: 5px 20px; border-radius: 5px; border: 1px solid salmon; margin-left: 5px; margin-top: 10px; background-color: salmon; color: #fff; }
    
    .delete:hover { background-color: #fc4a20; }

## 运行结果如图: ##

![这里写图片描述][20180912154756529]

[20180912154756529]: /images/20210626/07f2bf34f07545a4a2d1de249dfcf572.png

发表评论取消回复

表情：

评论列表（有 0 条评论，457人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUI el-checkbox实现全选反选单选

一、概述先来看一下效果图 ![8dbcd72c55ff052910facb707005eab9.png][] 需求： 1. 每一种类型，可以全选，反选(一个都不选

痛定思痛。/ 2022年10月09日 02:35/ 0 赞/ 270 阅读

相关永久的CheckBox（单选，全选/反选）！

<html> <head> <title>选择</title> <script type="text/javascript" s

不念不忘少年蓝@/ 2022年10月02日 14:46/ 0 赞/ 223 阅读

相关使用js实现全选单选全部选

/ 思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选， // 把checkbox的checked设置为false即实

秒速五厘米/ 2022年08月20日 02:17/ 0 赞/ 210 阅读

相关 yii框架全选反选批量删除

<?php namespace app\\controllers; use Yii; use yii\\filters\\AccessControl;

太过爱你忘了你带给我的痛/ 2022年07月15日 00:37/ 0 赞/ 198 阅读

相关 js实现全选/反选和单选

描述一般用在后台管理数据，以及购物车批量操作等多种情况 ![这里写图片描述][SouthEast] JS代码： <script type="te

浅浅的花香味﹌/ 2022年06月08日 09:48/ 0 赞/ 305 阅读

相关 checkbox多选，单选删除详解

批量删除的功能呢，首先前台页面可以想到使用checkbox来做，这里后台数据库其实有两种删除的方式，如下： ![这里写图片描述][SouthEast] 但是不管数据库以哪种

红太狼/ 2022年05月18日 02:28/ 0 赞/ 704 阅读

相关关于全选、反选，批量删除

全选/反选 //全选/反选 function checkOpposite() { //获取所有复选框name属性值为check将其存入数组

╰半夏微凉°/ 2022年04月03日 09:56/ 0 赞/ 176 阅读

相关 VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1. 效果：如红框中部分。一选全选：表头上的单选框

怼烎@/ 2022年03月28日 10:50/ 0 赞/ 1009 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 543 阅读

相关 vue.js单选全选删除

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

我不是女神ヾ/ 2021年06月26日 16:06/ 0 赞/ 458 阅读