微信小程序 多选框(类似选择题)

今天给看微信小程序多选框时,自己写了一个例子(类似选择题),希望对大家有帮助

多选框列表中,我添加了判断如果没有选任何一项,提交按钮是不能点击提交的;如果想要提示,把按钮的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: '中国'},

{ name: 'BRA', value: '巴西'},

{ name: 'JPN', value: '日本'},

{ name: 'ENG', value: '英国'},

{ name: 'TUR', value: '法国'}

       ],

// 绑定按钮是否可点

clickCheck:true

},

// 点击单选框

checkboxChange: function (e) {

checkValue = e.detail.value;

// 判断是否选择了,如果选择了,才能点击按钮

if (e.detail.value[0]){

this.setData({

clickCheck: false

})

}else{

this.setData({

clickCheck: true

})

}

},

// 点击表单提交

submit:function(){

// 如果checkValue有值,说明选择了,可以提交

if (checkValue[0]){

wx.showToast({

title: '提交成功',

})

}else{

wx.showToast({

title: '未答题',

})

}

}

})

推荐阅读更多精彩内容