您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序頁面效果--多選框(類似選擇題)
發表時間:2021-4-30
發布人:葵宇科技
浏覽次數:97
今天給看微信小程序多選框時,自己寫了一個(gè)例子(zǐ)(類似選擇題),希望對大家有幫助
多選框列表中(zhōng),我添加了判斷如(rú)果沒有選任何一項,提交按鈕是不能點擊提交的;如(rú)果想要提示,把按鈕的disabled屬性删掉就行;
wxml:
<view class="container log-list">
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}" wx:key="item">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
<button bindtap="submit" disabled="{{clickCheck}}">提交</button>
</view>
js:
var checkValue = [];
page({
data:{
items:[
{ name: 'USA', value: '美國'},
{ name: 'CHN', value: '中(zhōng)國'},
{ name: 'BRA', value: '巴西'},
{ name: 'JPN', value: '日本'},
{ name: 'ENG', value: '英國'},
{ name: 'TUR', value: '法國'}
],
// 綁定按鈕是否可(kě)點
clickCheck:true
},
// 點擊單選框
checkboxChange: function (e) {
checkValue = e.detail.value;
// 判斷是否選擇了,如(rú)果選擇了,才能點擊按鈕
if (e.detail.value[0]){
this.setData({
clickCheck: false
})
}else{
this.setData({
clickCheck: true
})
}
},
// 點擊表單提交
submit:function(){
// 如(rú)果checkValue有值,說明選擇了,可(kě)以提交
if (checkValue[0]){
wx.showToast({
title: '提交成功',
})
}else{
wx.showToast({
title: '未答題',
})
}
}
})