这个怎么回事呢呢,想听取一下意见🙏🏻

img


在uniapp中,当点击按钮时,获取所有复选框组选中项,并转换成JSON格式字符串在控制台输出

效果图

img

页面代码,整体代码稍后打包

<template>
    <view>
        <view class="uni-panel-h" v-for="(i, index) in alarmList" :key="i.value" @click="checkAlarm(index)">
            <checkbox :checked="i.isChecked" />
            <text>{{i.name}}</text>
        </view>
        <button @click="printData" class="button01">提交数据</button>
    </view>
</template>
<style>
    .button01 {
        width: 80%;
        margin: auto;
    }
</style>
<script>
    export default {
        data() {
            return {
                alarmList: [{
                        name: '美国',
                        value: '美国',
                        isChecked: false
                    },
                    {
                        name: '中国',
                        value: '中国',
                        isChecked: true
                    },
                    {
                        name: '巴西',
                        value: '巴西',
                        isChecked: true
                    },
                    {
                        name: '日本',
                        value: '日本',
                        isChecked: false
                    },
                    {
                        name: '英国',
                        value: '英国',
                        isChecked: false
                    },
                    {
                        name: '法国',
                        value: '法国',
                        isChecked: false
                    },
                ]
            }
        },
        methods: {
            checkAlarm(index) {
                var invoice = this.alarmList[index]; //变量 invoice == 数组每一项索引
                if (invoice) {
                    invoice.isChecked = !invoice.isChecked //取反
                }
            },
            printData() {
                console.log(JSON.stringify(this.alarmList.filter(item => item.isChecked)))
            }

        }
    }
</script>

<template>
        <view class="uni-list">
            <checkbox-group @change="checkboxChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
                    <view>
                        <checkbox :value="item.value" :checked="item.checked" />
                    </view>
                    <view>{{item.name}}</view>
                </label>
            </checkbox-group>
        </view>
        <button type="default" @click="submit">提交表单</button>
</template>
<script>
export default {
        data() {
            return {
              items: [{
                        value: 'USA',
                        name: '美国'
                    },
                    {
                        value: 'CHN',
                        name: '中国'
                    },
                    {
                        value: 'BRA',
                        name: '巴西'
                    },
                    {
                        value: 'JPN',
                        name: '日本'
                    },
                    {
                        value: 'ENG',
                        name: '英国'
                    },
                    {
                        value: 'FRA',
                        name: '法国'
                    }
                ]
            }
      },
      methods: {
            checkboxChange: function (e) {
                var items = this.items,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    const item = items[i]
                    if(values.includes(item.value)){
                        this.$set(item,'checked',true)
                    }else{
                        this.$set(item,'checked',false)
                    }
                }
           },
           submit(){
                console.log(JSON.stringify(this.items.filter(item => item.checked)));
           }
    }
}
</script>
<style>
.uni-list-cell {
    display: flex;
    justify-content: flex-start
}
</style>

就是一个复选框 组 然后 点击提交 就行了 。获取 选中的复选框 就行 。 首先复选框 就应该 用 v-for 循环出来 。先定义一个数组
[{key:"china",text:"中国",checked:false}] ; 比如这个 key是 英文名称,text是中文 。checked是 是否选中默认是false 然后 给 checkbox 加 onChange事件 。传一个 key 。然后和 数据 对比 key相同的 改变其 checked值 。最后 点击提交 。 过滤 cehked为true的