微信小程序 checkbox組件詳解及簡單實例
更新時間：2017年01月10日 14:35:53 投稿：lqh
這篇文章主要介紹了微信小程序 checkbox組件詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下
微信小程序表單組件 checkbox
相關(guān)文章：
實現(xiàn)效果圖：
checkbox-group
多選項目組，內(nèi)部由多個checkbox組成。
checkbox-group內(nèi)只能包含checkbox
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| bindchange | EventHandle | checkbox-group中選中項發(fā)生改變是觸發(fā)change事件，detail = {value:[選中的checkbox的value的數(shù)組]} |
checkbox
多選項目。
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| value | String | checkbox標(biāo)識，選中時觸發(fā)checkbox-group的change事件，并攜帶checkbox的value | |
| disabled | Boolean | false | 是否禁用 |
| checked | Boolean | false | 當(dāng)前是否選中，可用來設(shè)置默認(rèn)選中 |
示例：
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for-items="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
Page({
data: {
items: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
]
},
checkboxChange: function(e) {
console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了詳解微信第三方小程序開發(fā)的相關(guān)資料,需要的朋友可以參考下2017-06-06
JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)
這篇文章主要為大家介紹了JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
前端必會的package.json創(chuàng)建及常見屬性用法示例詳解
這篇文章主要為大家介紹了前端必會的package.json創(chuàng)建及常見屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了微信小程序 常用工具類詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-02-02
實現(xiàn)一個簡單得數(shù)據(jù)響應(yīng)系統(tǒng)
這篇文章主要介紹了實現(xiàn)一個簡單得數(shù)據(jù)響應(yīng)系統(tǒng)，文章介紹的數(shù)據(jù)響應(yīng)系統(tǒng)會用到Dep，其實，這就是一個依賴收集的容器， depend 收集依賴， notify 觸發(fā)依賴，下面來看看詳細(xì)的內(nèi)容結(jié)介紹,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了微信小程序 選項卡的簡單實例的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了跨端開發(fā)框架avm組件封裝的經(jīng)驗分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了在JavaScript實例對象中改寫原型方法的一下相關(guān)資料,需要的效果版可以參考一下文章詳細(xì)內(nèi)容，希望對你有所幫助2021-10-10
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡單實例，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序本作用域下調(diào)用全局JS詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-02-02