知識(shí)
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X(jué)表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷(xiāo)的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷(xiāo)工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!
您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >
微信小程序頁(yè)面效果--多選框(類(lèi)似選擇題)
發(fā)表時(shí)間:2021-4-30
發(fā)布人:葵宇科技
瀏覽次數(shù):145
今天給看微信小程序多選框時(shí),自己寫(xiě)了一個(gè)例子(類(lèi)似選擇題),希望對(duì)大家有幫助
多選框列表中,我添加了判斷如果沒(méi)有選任何一項(xiàng),提交按鈕是不能點(diǎn)擊提交的;如果想要提示,把按鈕的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: '美國(guó)'},
{ name: 'CHN', value: '中國(guó)'},
{ name: 'BRA', value: '巴西'},
{ name: 'JPN', value: '日本'},
{ name: 'ENG', value: '英國(guó)'},
{ name: 'TUR', value: '法國(guó)'}
],
// 綁定按鈕是否可點(diǎn)
clickCheck:true
},
// 點(diǎn)擊單選框
checkboxChange: function (e) {
checkValue = e.detail.value;
// 判斷是否選擇了,如果選擇了,才能點(diǎn)擊按鈕
if (e.detail.value[0]){
this.setData({
clickCheck: false
})
}else{
this.setData({
clickCheck: true
})
}
},
// 點(diǎn)擊表單提交
submit:function(){
// 如果checkValue有值,說(shuō)明選擇了,可以提交
if (checkValue[0]){
wx.showToast({
title: '提交成功',
})
}else{
wx.showToast({
title: '未答題',
})
}
}
})
相關(guān)案例查看更多
相關(guān)閱讀
- 網(wǎng)站建設(shè)公司網(wǎng)站
- 商標(biāo)
- 全國(guó)前十名小程序開(kāi)發(fā)公司
- 云南網(wǎng)站建設(shè)公司哪家好
- 小程序分銷(xiāo)商城
- 曲靖小程序開(kāi)發(fā)
- APP
- 云南網(wǎng)站建設(shè)靠譜公司
- 重慶網(wǎng)站建設(shè)公司
- 報(bào)廢車(chē)管理
- 云南網(wǎng)站建設(shè)首選公司
- 紅河小程序開(kāi)發(fā)
- 百度人工排名
- 云南省住房建設(shè)廳網(wǎng)站
- 昆明小程序定制開(kāi)發(fā)
- 服務(wù)器
- 云南小程序開(kāi)發(fā)制作
- 楚雄小程序開(kāi)發(fā)
- 云南etc微信小程序
- 云南網(wǎng)站建設(shè)列表網(wǎng)
- 網(wǎng)站建設(shè)專(zhuān)業(yè)品牌
- 微信小程序
- 汽車(chē)報(bào)廢管理系統(tǒng)
- 網(wǎng)站建設(shè)制作
- 云南電商網(wǎng)站建設(shè)
- 云南省建設(shè)廳網(wǎng)站
- 網(wǎng)站建設(shè)高手
- 昆明網(wǎng)站建設(shè)公司
- 網(wǎng)站建設(shè)公司地址
- 小程序