微信小程序 checkbox組件詳解及簡單實(shí)例
更新時(shí)間：2017年01月10日 14:35:53 投稿：lqh
這篇文章主要介紹了微信小程序 checkbox組件詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下
微信小程序表單組件 checkbox
相關(guān)文章：
實(shí)現(xiàn)效果圖：
checkbox-group
多選項(xiàng)目組，內(nèi)部由多個(gè)checkbox組成。
checkbox-group內(nèi)只能包含checkbox
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| bindchange | EventHandle | checkbox-group中選中項(xiàng)發(fā)生改變是觸發(fā)change事件，detail = {value:[選中的checkbox的value的數(shù)組]} |
checkbox
多選項(xiàng)目。
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| value | String | checkbox標(biāo)識(shí)，選中時(shí)觸發(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)文章
JS前端模擬Excel條件格式實(shí)現(xiàn)數(shù)據(jù)條效果
這篇文章主要為大家介紹了JS前端模擬Excel條件格式實(shí)現(xiàn)數(shù)據(jù)條效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
fs-extra實(shí)現(xiàn)yarn?create?tlist創(chuàng)建示例詳解
這篇文章主要為大家介紹了fs-extra實(shí)現(xiàn)yarn?create?tlist創(chuàng)建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了JavaScript流程控(循環(huán)),在程序中，一組被重復(fù)執(zhí)行的語句被稱之為循環(huán)體，能否繼續(xù)重復(fù)執(zhí)行，取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句，被稱之為循環(huán)語句,更多詳細(xì)內(nèi)容請需要的小伙伴參考下面文章的具體介紹2021-12-12
特殊字符、常規(guī)符號(hào)及其代碼對照表...2006-06-06
這篇文章主要為大家介紹了JS前端監(jiān)控采集用戶行為的N種姿勢，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了JS中疑惑的數(shù)據(jù)類型及類型判斷方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了buildcheck包報(bào)錯(cuò)問題排查解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序tabbar不顯示解決辦法的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了Express框架兩個(gè)內(nèi)置中間件方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
這篇文章主要介紹了微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換的相關(guān)資料,這里提供實(shí)現(xiàn)實(shí)例幫助大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-08-08