zoukankan      html  css  js  c++  java
  • 微信小程序checkbox多选传多个参数的操作

    今天重拾小程序做关于checkbox多选框时需要在wxml向js传name和id两个参数,那我们知道微信提供给我们 data-id="{{item.id}}" data-name="{{item.name}}"这种传值方式,但是只适合于单选操作,当我们需要多选的时候该如何操作呢,直接上代码:

    js界面:

     productList:[
     {id: 1, name: '2019中国拼词大赛', checked: 'true', price:'100'
    },
     {id: 2, name: '2019~2020年团体赛使用手册',checked: 'true', price:'100'
    },
     {id: 3, name: '2020个人赛赛区使用手册',checked: 'true', price:'100'
    }
     ],
     
    wxml界面:
    <view class="xxx">
    <checkbox-group bindchange="checkproductChange">
    <label class="xxx" wx:for="{{productList}}" wx:key="{{item.id}}">
    <view class="xxx">
    <checkbox value="{{item.id}},{{item.name}}" checked="{{item.checked}}"/>
    </view>
    <view class="xxx">
    <view class="xxx">{{item.name}}</view>
    <view class="xxx">¥{{item.price}}</view>
    </view>
    </label>
    </checkbox-group>
    </view>
     
     
     
    js界面多选点击事件:
    checkproductChange: function(e) {
    var item = e.detail.value 
    var selectid = []; //选中的id
    var selectname = []; //选中的name
    for (var i = 0; i < item.length; i++) {
    var selectrow = item[i].split(",") //数组以逗号分割
    selectid = selectid.concat(selectrow[0]) //第一个为id
    selectname = selectname.concat(selectrow[1]) //第二个为name
    }
    console.log(selectid)
    console.log(selectname)
    }
     
     
    ok这样多选的两个值就传到js里面了。
     
     
     
     
     
     
  • 相关阅读:
    20172302 201720182 《程序设计与数据结构》实验二报告
    20172302 201720182 《程序设计与数据结构》实验一报告
    20172302 《程序设计与数据结构》第五周学习总结
    POJ 1061 青蛙的约会
    hdu 2485 Highways
    UVA 10608
    hdu 1213 how many tables
    java类static成员加载顺寻
    C# virtual,override或者new
    vs无法在WEB服务器上启动调试
  • 原文地址:https://www.cnblogs.com/FZP5/p/13713468.html
Copyright © 2011-2022 走看看