精华内容
下载资源
问答
  • 2021-10-25 21:20:23
    更多相关内容
  • vue复选框全选全不选

    千次阅读 2018-12-14 21:29:54
    多个复选框: 选择的值为:{{checkedNames}} var app= new Vue({ el: '#app', data: { checked: false, checkedNames: [], checkedArr:["Runoob","Google","Taobao"] }, methods: { ...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <div id="app">
        <p>
            全选:
        </p>
        <input type="checkbox" id="checkbox" v-model="checked" @click="changeAllChecked()">
        <p>
            多个复选框:
        </p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <br>
        <span>
    选择的值为:{{checkedNames}}
    </span>
    </div>
    <script>
        var app= new Vue({
            el: '#app',
            data: {
                checked: false,
                checkedNames: [],
                checkedArr:["Runoob","Google","Taobao"]
            },
            methods: {
                changeAllChecked: function () {
                    var self=this;
                    if (!self.checked) {
                        self.checkedNames=[]
                    } else {
                        self.checkedNames=self.checkedArr;
                    }
                }
            },
            watch:{
                "checkedNames":function(){
                    if(this.checkedNames.length!=this.checkedArr.length){
                        this.checked=false
                    }else{
                        this.checked=true
                    }
                }
            }
        })
    </script>
    </body>
    
    </html>
    

    效果如下:

    在这里插入图片描述

    展开全文
  • 主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue 实现复选框全选,反选,单选,多选(简易版) 实现效果,如图: HTML代码: <template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:500px;padding...

    Vue 实现复选框全选,反选,单选,多选(简易版)

    实现效果,如图:
    在这里插入图片描述
    HTML代码:

    <template>
        <div>
            <div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:500px;padding:50px">
                <ul style="list-style: none">
                    <li>
                        <el-checkbox v-model="allChecked" @change="handleAllChecked">全选</el-checkbox>
                    </li>
                    <li v-for="(item,index) in testList" :key="index">
                        <el-checkbox v-model="item.isChecked" @change="handleChecked(item,$event)">{{ item.id }}</el-checkbox>
                    </li>
                </ul>
            </div>
        </div>
    </template>
    

    JavaScript代码:

    <script>
    export default {
        data () {
            return {
                allChecked: false,
                testList: [
                    { id: 1 },
                    { id: 2 },
                    { id: 3 },
                    { id: 4 },
                    { id: 5 }
                ]
            }
        },
        watch: {
            testList: { // 监听事件,监听复选框是否全部选中,全部选中则全选的复选框勾选上
                handler(val) {
                    var i = 0
                    this.testList.forEach(item => {
                        if (item.isChecked === true) {
                            i++
                        }
                        if (i === this.testList.length) {
                            this.allChecked = true
                        } else {
                            this.allChecked = false
                        }
                    })
                },
                deep: true
            }
        },
        created() {
            this.testList.forEach(item => { // 处理后端传过来的数据,如果没有可以判断是否勾选复选框的字段,则需给数据作处理,加上一个isChecked字段,判断复选框勾选
                this.$set(item, 'isChecked', false) // 添加判断的字段
            })
        },
        methods: {
            handleAllChecked(v) { // 实现全选,反选(点击会传递true或者false过来)
                this.testList.map(item => {
                    item.isChecked = v
                })
            },
            handleChecked(item, e) { // 单个选中
                item.isChecked = e
            }
        }
    }
    </script>
    
    展开全文
  • <el-select multiple collapse-tags v-model="searchForm.auditResult" @change="change...el-option label="全选" value="全选" @click.native="selectAll"></el-option> <el-option v-for="(i...

    在这里插入图片描述

      <el-select multiple collapse-tags v-model="searchForm.auditResult" @change="changeSelect" @remove-tag="removeTag" placeholder="请选择">
    	 <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
         <el-option v-for="(item, index) in auditResultData" :key="item.value" :label="item.label" :value="item.value">
    	    <span class="check"></span>
    	    <span style="margin-left: 8px">{{ item.label }}</span>
    	</el-option>
    	</el-select>
    
         //选中数据
    	  searchForm: {
    	      auditResult: []
    	  },
          下拉框数据
           auditResultData: [
               { label: '全部' value: '0' },
               { label:'有违规', value: '1' },
               { label:'无违规', value: '2' }
           ],
    
      // 思路:第一次点击全选,全选数组没有数据,而下拉框数组有数据,因此会走进判断并且向全选数组中添加所有的数据,都会被选中
       selectAll() {
            if (this.searchForm.auditResult.length < this.auditResultData.length) {
                this.searchForm.auditResult = [];
                this.auditResultData.map(item => {
                    this.searchForm.auditResult.push(item.value);
                });
            } else {  //再次点击全选清空选中数据
                this.searchForm.auditResult = [];
            }
        },
        //可要可不要
        changeSelect(val) {
            this.searchForm.auditResult = this.searchForm.auditResult.filter(item => {
                return item;
            });
        },
        //点击input输入框删除选中数据
        removeTag(val) {
            this.searchForm.auditResult = [];
        },
    
    展开全文
  • Vue 复选框 checkbox 全选与取消全选 组件 <template> <p> 全选: </p> <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()"> <label for...
  • vue复选框 全选 反选 删除功能 组件 代码地址: https://gitee.com/WzQw/codes/otuc4znsgvx01y36arfpj24
  • Vue实现复选框的多选与全选
  • 导语:Vue中单下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图:如果网上搜的话,搜的是一堆带children的 ,那种是遍历tree的...
  • 复选框全选

    2021-12-08 00:47:19
    判断全选框是否选中 // * 如果全选框选中则,所有复选框全选中 // * 如果全选框没选中, 所有复选框不选中 // */ // function checkboxAll() { // var checkboxAllEle = document.querySelector('.checkbox-all') /...
  • VUE+Elementui实现复选框的多选与全选

    千次阅读 2022-03-01 16:22:01
    {{ item.resourceName }} 全选 *此模块无权限 getSchemeDetail() { this.$api( 'getRiskStrategyBaseStrategyBaseData', this.riskStrategyType, 'params', ) .then((res) => { console.log(res) // this.program...
  • 效果图 主要代码实现 <div class="isck" @click="btnCheck(item)"> ... v-show="item.isCheck" ... src="@/assets/images/btn/btn_opt_s_r_p.png" ... src="@/assets/images/btn/btn_opt_s.
  • 效果图: main.js: <template> <div> <div class="table"> <table border="1" cellspacing="0"> <thead> <tr> <th> <... :value="isAllChec.
  • 使用Vue实现复选框全选与反全选

    千次阅读 2020-01-18 15:25:17
    该实例实现复选框全选与反全选。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN引入Vue.js --> ...
  • Vue 复选框全选 配合ajax删除 Springboot 这是Vue全选代码 checkedAll: function() { var _this = this; //遍历数组列表 this.newss.forEach(function(ns, index) { if(_this.nids.indexOf...
  • 全选,取消全选流程步骤图: 代码: 1,按钮控件 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reportall()"> 上报权限全选 </button> <button type="button...
  • 实现代码:demo全选:{{checked}}多个复选框:uuihooGoogletaobao选择的值为:{{checkedNames}}new Vue({el: '#app',data: {checked: false,checkedNames: [],checkedArr: ["uuihoo", "alibaba", "Google"]},methods:...
  • Vue复选框全选

    2019-04-27 15:53:00
    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue复选框全选</title> </head> <body> <div id="app"> ...
  • vue实现(checkbox)复选框全选

    千次阅读 2019-10-31 14:54:02
    最近写项目 js的全选...这个是我需要选择的复选框(一部分代码): <tr v-for="(s,key) in sites" > <td<input type="checkbox" name="id" v-model="nid" :value="s.nid" /> {{key+1}}</td>...
  • antd-vue 复选框实现全选(跨页)

    千次阅读 2020-05-13 16:44:19
    官方文档给了全选实例,说实话够用了,但是最近我新做了一个需求是跨页全选,打个比方,我在第一页全选了12条内容,然后到第二页拉新数据了,在选择第二页的一部分,然后我再回到第一页,取消掉几个,再来到第二页,...
  • 下面小编就为大家分享一篇基于vue v-for 循环复选框-默认勾选第一个的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue+element-ui复选框勾选失败 使用vue.set()方法或他的别名this.$set()方法解决 问题现象 复选框勾选后无效果,但是数据已经更改。 //错误代码 <template slot-scope="scope"> <el-checkbox v-model=...
  • Vue实现checkbox的全选和取消全选

    千次阅读 2018-12-13 11:16:59
    关键:复选按钮绑定同一个v-mode数组变量,数组里面有相应的value就被选中,选择就自动把:value="item.id"值添加到数组,取消就自动删除这个值。   &lt;div&gt; &lt;!--给全选按钮绑定v...
  • 最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态。这篇文章主要介绍了vue基于element-ui的三级CheckBox复选框功能的实现方法,需要的朋友可以参考下
  • 购物车的基本操作,推荐全选与反选代码片段,简单易懂,没上传node_modules依赖,下载后自行install

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,456
精华内容 582
关键字:

vue复选框全选