This paper mainly introduces the implementation of many radio buttons in wechat applet. As we all know, the applet can't bind the DOM intercept at present. The principle of implementation is to get the data ID through the event method of bindtap click and loop through it to achieve this effect.
(1) Radio button group
The model diagram is as follows: 
index.js
Page({ data: { parameter: [{ id: 1, name: 'silvery' }, { id: 2, name: 'white' },{ id: 3, name: 'black' }],//Simulate product parameter data. If it is an online version, you need to initiate a request by yourself }, onLoad: function (options) { this.data.parameter[0].checked = true; this.setData({ parameter: this.data.parameter, })//The first object of the default parameter array is selected }, // Parameter click response event parameterTap:function(e){//e is getting e currentTarget.dataset.id So it's necessary. It's similar to the front-end data ID acquisition var that=this var this_checked = e.currentTarget.dataset.id var parameterList = this.data.parameter//Get Json array for (var i = 0; i < parameterList.length;i++){ if (parameterList[i].id == this_checked){ parameterList[i].checked = true;//If the current click position is true, it is selected } else{ parameterList[i].checked = false;//Other locations are false } } that.setData({ parameter: parameterList }) } })
index.xml
<view>Specifications</view> <view> <block wx:for="{{parameter}}" wx:key="parameter"> <textchecked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text> </block> </view>
Tips: here{{ item.checked? ”checked_parameter: '}} is a ternary selector, that is, to judge whether the current style is selected by checked, and then add checked style_ parameter.
(2) Multi select button group
The model diagram is as follows: 
cartList.js
Page({ data:{ CartList:[],//Short processing. If the value of the back end of the shopping cart is empty, it is easy to generate an error }, onLoad: function () { // Get cart request var that = this; wx.request({ url: request_getCartList,//Send a request to the back end. Here is the get method. If you need ajax, please refer to the relevant articles in this website data: { "session3rd": userid, }, success: function (res) { if (res.data.code == -2) { that.setData({ CartList: [] }) } if(res.data.code==1){ that.setData({ CartList: list }) } } }) }, // Multiple choice chooseOs: function (event) { for (var i = 0; i < this.data.CartList.length; i++) { if (event.currentTarget.id == this.data.CartList[i].id) { if (this.data.CartList[i].checked == true) { this.data.CartList[i].checked = false; var CartList = this.data.CartList; this.setData({ CartList//Redefining CartList to refresh the style of shopping cart locally }) } else { this.data.CartList[i].checked = true; var CartList = this.data.CartList; this.setData({ CartListt//Redefining CartList to refresh the style of shopping cart locally }) } } } }, })
cart.xml
<block wx:for="{{CartList}}" wx:key=""> <view> <view catchtap='chooseOs' id="{{item.id}}"> <image src="{{imgSrc}}{{item.checked?'type_1':'type_0'}}.png" mode="widthFix"></image> </view> </view> </block>
Tips: the front-end page calls the chooseOs method through catchtap event capture to obtain the ID of the currently clicked object, i.e. id = "{{ item.id }}", and then add styles to the selected events this.data.CartList[i].checked = true;, delete styles for unchecked events this.data.CartList[i].checked = false;
(3) Check to expand - select all and not select all
cart.xml
<view bindtap='allCheckTap' wx:if="{{!checked}}"> <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image> <text>Select all</text> </view> <view bindtap='allCheckTap' wx:if="{{checked}}"> <image src="{{imgSrc}}{{checked?'type_1':'type_0'}}.png" mode="widthFix"></image> <text>No choice</text> </view>
Tips:Here'Select all'and'No choice'There is no merger. Small farmers need to integrate themselves.
cartList.js
// Select all button allCheckTap: function () { this.setData({ checked: !this.data.checked, }) if (this.data.checked) { for (var i = 0; i < this.data.CartList.length; i++) { if (this.data.CartList[i].checked !== true) { this.data.CartList[i].checked = true; var CartList = this.data.CartList; this.setData({ CartList }) } } } else { for (var i = 0; i < this.data.CartList.length; i++) { if (this.data.CartList[i].checked == true) { this.data.CartList[i].checked = false; var CartList = this.data.CartList; this.setData({ CartList }) } } } },
tips: the logic of selecting all and not selecting all is simple, that is, traversing all checked loops this.data.CartList[i].checked == true or false, and then pass this.setData() redefine it to implement local refresh.