微信小程序mina框架11-checkbox 多选标签

 

checkbox的用法

https://www.bilibili.com/video/BV1nE41117BQ?p=34&spm_id_from=pageDriver

 

第一种，写法

demo6.wmxl

<radio-group bindchange="handleChange">
    <radio value="male" >男</radio>
    <radio value="female" >女</radio>
</radio-group>
您选择的是{{gender}}

<checkbox-group bindchange="handleCheckbox">
    <checkbox  value="apple"   >pg</checkbox>
    <checkbox  value="banana"   >xj</checkbox>
    <checkbox  value="watemalen"  >xg</checkbox>
</checkbox-group>
您选择的是{{shuiguo}}

 

demo6.js

Page({
    data: {
        gender: '',
        shuiguo: [],
    },

    handleChange(e) {
        //console.log(e)
        let gender = e.detail.value;
        this.setData({
            gender,
        });
    },


    handleCheckbox(e) {
        //console.log(e)
        const shuiguo = e.detail.value;
        this.setData({
            shuiguo,
        });
    },

 

 

第二种数组循环的方式写checkbox

Page({
    data: {
        shuoguolist: [],
        list: [
            {
                id: 0,
                name: "香蕉",
                value: "banana",
            },
            {
                id: 1,
                name: "苹果",
                value: "apple",
            },
            {
                id: 2,
                name: "葡萄",
                value: "grape",
            },
        ],
    },

    handelChange(e) {
        const shuoguolist = e.detail.value;
        this.setData({
            shuoguolist,
        });
    },
});

 

 

<checkbox-group bindchange="handelChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id"  >   
        {{item.name}}    
     </checkbox>
</checkbox-group>
您选择的是：{{shuoguolist}}