微信小程序單選radio及多選checkbox按鈕用法示例
更新時間：2019年04月30日 10:27:34 作者：weixin_41991473
這篇文章主要介紹了微信小程序單選radio及多選checkbox按鈕用法,結(jié)合實例形式分析了微信小程序中單選radio及多選checkbox按鈕的選項設(shè)置、讀取、選中等相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了微信小程序單選radio及多選checkbox按鈕用法。分享給大家供大家參考，具體如下：
1.單選：radio
實例：
js:
Page({
data : {
radioId:"",
loves:[
{id:1, name:"跑步" ,checked : 'true'},
{id:2, name:"籃球" },
{id:3, name:"足球" },
]
},
updataRadio:function(e){
var Id=e.value.id
this.setData({
radioId:Id
})
},
})
wxml:
<radio-group class="radio" bindChange="updataRadio">
<view wx:for="{{loves}}">
<radio value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</radio>
</view>
</radio-group>
2.多選：CheckBox
實例：
js:
Page({
data : {
radioId:[],
loves:[
{id:1, name:"跑步" ,checked : 'true'},
{id:2, name:"籃球" },
{id:3, name:"足球" },
]
},
updataRadio:function(e){
var Id=e.value.id
this.setData({
radioId:Id
})
},
})
wxml:
<checkbox-group class="checkbox" bindChange="updataRadio">
<view wx:for="{{loves}}">
<chechbox value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</chechbox>
</view>
</checkbox-group>
附：多選獲得的值是一個數(shù)組，單選獲得的值是一個單值
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
bootstrapfileinput實現(xiàn)文件自動上傳
這篇文章主要介紹了bootstrapfileinput實現(xiàn)文件自動上傳,bootstrap fileinput插件對多種類型的文件提供文件預(yù)覽，并且提供了多選等功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)獲取手機號60s倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了for?of?和?for?in?的區(qū)別,for?of?和?for?in都是用來遍歷的屬性，本文重點介紹下for?of?和?for?in?的區(qū)別，需要的朋友可以參考下2022-12-12
異步加載JS文件的實現(xiàn)函數(shù)代碼。2009-07-07
這篇文章主要介紹了js實現(xiàn)滑動觸屏事件監(jiān)聽的方法,適用于手機端觸屏滑動事件的監(jiān)聽技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
Javascript removeChild()刪除節(jié)點及刪除子節(jié)點的方法
這篇文章主要介紹了Javascript removeChild()刪除節(jié)點及刪除子節(jié)點的方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實例詳解
函數(shù)是由事件驅(qū)動的或者當它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊。通過本文給大家介紹JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法，感興趣的朋友一起學習吧2016-03-03
調(diào)試Node.JS的輔助工具(NodeWatcher)
Node.JS調(diào)試貌似比較麻煩,每次改完了要重啟一下Node進程.GOOGLE上有個NPM模塊,可以監(jiān)控JS文件的更改,然后自動重啟Node.但我下載后在windows里運行報錯
2012-01-01 
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)日歷功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11