文档章节

vue.js checkbox 联动

子_不语
 子_不语
发布于 2016/05/13 14:14
字数 360
阅读 208
收藏 3

点击chkGroup的checkbox,联动 form-group下面的checkbox 选中或不选中

<template v-for="(i,item) in items">
<div class="group"><input name="chkGroup" type="checkbox" value="checkbox" v-model="item.check" v-on:click="check(i)">{{item.name}}</div>
<div class="row">
        <div class=" form-group" v-for="(index, child) in item.child">
            <input type="checkbox" name="action_code[]" value="{{child.unique}}" id="{{child.unique}}" class="checkbox"  v-model="child.check" />{{child.name}}</div></div>
</template>

 

var vm = new Vue({
        el: '#content',
        data: {           
            items:{"1":{"id":1,"name":"商品管理","letter":"goods","check":"","child":[{"cid":1,"letter":"goods","cname":"商品管理","id":1,"name":"商品管理","columnid":1,"unique":"goods\/index","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":1,"letter":"goods","cname":"商品管理","id":2,"name":"添加商品","columnid":1,"unique":"goods\/add","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":1,"letter":"goods","cname":"商品管理","id":3,"name":"商品分类","columnid":1,"unique":"goods\/category","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":1,"letter":"goods","cname":"商品管理","id":4,"name":"品牌管理","columnid":1,"unique":"brand\/index","url":"","show":1,"top":0,"rank":1,"check":"false"}]},"9":{"id":9,"name":"系统设置","letter":"system","check":"","child":[{"cid":9,"letter":"system","cname":"系统设置","id":5,"name":"后台菜单","columnid":9,"unique":"action_column\/index","url":"","show":1,"top":0,"rank":1,"check":"false"}]},"8":{"id":8,"name":"权限管理","letter":"role","check":"","child":[{"cid":8,"letter":"role","cname":"权限管理","id":6,"name":"管理员列表","columnid":8,"unique":"admin_user\/index","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":8,"letter":"role","cname":"权限管理","id":7,"name":"分组管理","columnid":8,"unique":"admin_role\/index","url":"","show":1,"top":0,"rank":1,"check":"false"}]}},
            },
        
        methods: {
            check: function (i) {
                var item=vm.items[i];
                    for (x in item.child){
                        if(item.check){
                            item.child[x].check=flase;
                        }else{
                            item.child[x].check=true;
                        }
                    }
            }
        }
    });

 

© 著作权归作者所有

子_不语

子_不语

粉丝 1
博文 4
码字总数 656
作品 0
杭州
程序员
私信 提问
从零实现Vue的组件库(十五)- Checkbox-Group 实现

基于 组件进行二次封装的 CheckboxGroup 组件 CheckboxGroup 组件与 RadioGroup 组件类似,但是也存在不同点,在于 CheckboxGroup 为多选组,并且需要 Checkbox 可以单独使用。 1. 实例 代码...

FatGe
02/15
0
0
checkbox在vue中的用法小结

前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue中用到过...

peakedness丶
2018/12/07
0
0
Vue.js 0.12.12 发布,轻量级 JavaScript 库

Vue.js 0.12.12 发布,更新内容如下: 提升 on checkbox can now bind the model value to expressions instead of just or . Example: on radio also gets the same feature: 修复 on check......

oschina
2015/08/27
1K
7
从零实现Vue的组件库(十四)- RadioGroup 实现

基于 组件进行二次封装的 RadioGroup 组件 RadioGroup 组件的难点在于: 与 之间的联动关系、数据绑定关系,使得 可以单独使用或者组合; 利用插槽可以方便扩展 。 1. 实例 代码 实例地址:R...

FatGe
02/06
0
0
js技巧:十几行的代码实现vue.watch

最近忙得狗一样,有一段时间没有更新了,虽然是僵尸博主,但是有点小收获还是要来唠叨一下的。 相信很多的用vue的人都知道vue双向绑定的原理建立在,给属性绑定了getter和setter,在属性被改...

JasonWild
2018/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
5
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部