微信小程序單選radio及多選checkbox按鈕用法示例
更新時(shí)間：2019年04月30日 10:27:34 作者：weixin_41991473
這篇文章主要介紹了微信小程序單選radio及多選checkbox按鈕用法,結(jié)合實(shí)例形式分析了微信小程序中單選radio及多選checkbox按鈕的選項(xiàng)設(shè)置、讀取、選中等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序單選radio及多選checkbox按鈕用法。分享給大家供大家參考，具體如下：
1.單選：radio
實(shí)例：
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
實(shí)例：
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>
附：多選獲得的值是一個(gè)數(shù)組，單選獲得的值是一個(gè)單值
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
在web端，輸入的時(shí)候，很容易在文本框消失焦點(diǎn)的時(shí)候，點(diǎn)擊退格鍵，頁面就回退了，下面是一種屏蔽頁面回退鍵的方法,一起看看吧2016-12-12
js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn)
本文主要介紹了js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
微信小程序BindTap快速連續(xù)點(diǎn)擊目標(biāo)頁面跳轉(zhuǎn)多次問題處理
這篇文章主要介紹了微信小程序BindTap快速連續(xù)點(diǎn)擊目標(biāo)頁面跳轉(zhuǎn)多次問題處理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)下拉框選擇組件的開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
學(xué)習(xí)JavaScript設(shè)計(jì)模式之觀察者模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的觀察者模式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
本系列博文主要談一些在 javascript 使用中經(jīng)常會(huì)混淆的高級(jí)應(yīng)用,包括: prototype, closure, scope, this關(guān)鍵字. 對(duì)于一個(gè)需要提高自己javascript水平的程序員,這些都是必須要掌握的.2009-09-09
echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了uni-app 滾動(dòng)到指定位置的操作方法,其中方法一是使用標(biāo)簽,可以將頁面橫向（或縱向）滾動(dòng)到指定位置還有其他多種方法,需要的朋友可以參考下2024-05-05
當(dāng)你進(jìn)行函數(shù)的嵌套時(shí)，要注意實(shí)際上作用域鏈?zhǔn)前l(fā)生變化的，這點(diǎn)可能看起來不太直觀。你可把下面的代碼置入firebug監(jiān)視值的變化。2010-03-03
showModalDialog模態(tài)對(duì)話框的使用詳解以及瀏覽器兼容
showModalDialog是jswindow對(duì)象的一個(gè)方法，和window.open一樣都是打開一個(gè)新的頁面。區(qū)別是：showModalDialog打開子窗口后，父窗口就不能獲取焦點(diǎn)了（也就是無法操作了）2014-01-01