Modify radio style in UNIapp

  • Solution (Write styles in app.vue file (only in app.vue, otherwise no effect)
<! Or just switch images and use div to simulate radio. -- > <! The <radio-group> change event carries the value of <radio> --> <! <view class="w-100 dagou d-flex a-center mgT-32 "> <radio-group @change="radioChange" class="radio-group-wrap"> <! -- :checked= = true Defaults to checked --> <! -- :checked="false" Defaults to unchecked --> <! <view class="dagou-left"><radio value="agreementSelected" :checked="agreementChecked" @click="radioClick"></radio></view> <view class="mgl-16 dagou-right"> I have read and agree with <text Class ="agreement"> </view> </view> </view>Copy the code

The first method is to get the value that you selected

The second method is deselect

methods: { radioChange(e) { console.log(e.detail); // This. AgreementChecked! = this.agreementChecked; // Get: this.agreementChecked =! this.agreementChecked; }, radioClick(){console.log('~~~ ~ radio~~') // this.agreementChecked = false // this.agreementChecked =! this.agreementChecked; }}Copy the code

Ps: write it the other way around

// This. AgreementChecked! = this.agreementChecked; // Get the correct version: this.agreementChecked =! this.agreementChecked;Copy the code

Attempts to implement multiple selections with radio options fail: only one of the multiple selections is implemented but cannot be unselected

<view class="circle-list-arr d-flex a-center " v-else :key="index" v-for="(value,index) in avocationDetail"> <view class="circle-list-son "> <view class="w-686 mgr-32 d-flex a-center j-sb containnerBox "> <text>{{value.title}}</text> <! < radio-group-@change ="radioChange" class="radio-group-wrap"> <! -- just implement one of many can not be unchecked --> <! -- <radio :value="value.id" :checked="currentId == value.id" @click="radioClick(value.id)"></radio> --> <radio :value="value.id" :checked="currentId == value.id" @click="radioClick(value.id)"></radio> </radio-group> </view> </view>  </view>Copy the code

js

//data: currentId: ", //methods: // radioChange(e) {console.log(' select the value of the radio box :', e.dial); }, radioClick(id){console.log('~~~ ~ radio~~') // this.agreementChecked = false // this.agreementChecked =! this.agreementChecked; this.currentId = id },Copy the code

Implement multiple selection:

<! -- Multiple options --> <view class="uni-list"> < checkbox-group@change ="checkboxChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="item in avocationDetail" :key="item.id"> <view>{{ item.title }}</view> <view> <checkbox :value="item.id" :checked="item.checked" /> <! -- <checkbox :value="item.value" :checked="false" /> --> </view> </label> </checkbox-group> </view>Copy the code

js

// Select activeGather: [], // avocationDetail: []Copy the code
// check: false When clicking other boxes add the checked property checkboxChange: function(e) { // var items = this.items, var items = this.avocationDetail, values = e.detail.value; / / set the console. The log (values); //["CHN", "BRA", "JPN"] console.log(items); this.activeGather = values; for (var i = 0, lenI = items.length; i < lenI; ++i) { const item = items[i]; The // includes() method is used to determine whether a string contains a specified substring. // Return true if a matching string is found, false otherwise. If (values.includes(item.value)) {// Vue. Set (object, key, value); } else { this.$set(item, 'checked', false); }}}Copy the code

Bug checked = “false”

<! Checked is not checked on the first click because the background data did not have the checked property at the beginning. -- <checkbox :value="item.id" :checked="item.checked" /> --> <checkbox :value="item.id" :checked="false" />Copy the code