效果图
页面代码,整体代码稍后打包
<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的