微信小程序checkbox組件使用詳解
更新時(shí)間：2018年01月31日 13:48:30 作者：Rattenking
這篇文章主要介紹了微信小程序checkbox組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序checkbox組件的使用方法，供大家參考，具體內(nèi)容如下
效果圖
WXML
<view class="tui-content">
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<view class="tui-menu-list"><checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
</label>
</checkbox-group>
<view class="tui-show-name">
<text wx:for="{{checkArr}}"> {{item}} </text>
</view>
</view>
JS
Page({
data: {
items: [
{ name: 'USA', value: '美國(guó)' },
{ name: 'CHN', value: '中國(guó)', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英國(guó)' },
{ name: 'TUR', value: '法國(guó)' },
],
checkArr: ['中國(guó)']
},
checkboxChange: function (e) {
var arr = [];
e.detail.value.forEach(current => {
for (var value of this.data.items){
if(current === value.name){
arr.push(value.value);
break;
}
}
});
this.setData({checkArr: arr});
}
})
總結(jié)
- 由于e.detail.value和this.data.items都是數(shù)組元素進(jìn)行屬性對(duì)比查找，所以此處采用了雙循環(huán)。
- forEach循環(huán)不能在循環(huán)中跳出，所以在循環(huán)this.data.items時(shí)采用for…of…
DEMO下載
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
原生javascript實(shí)現(xiàn)獲取指定元素下所有后代元素的方法
這篇文章主要介紹了原生javascript實(shí)現(xiàn)獲取指定元素下所有后代元素的方法,在進(jìn)行web程序設(shè)計(jì)時(shí)是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
解析微信JS-SDK配置授權(quán)，實(shí)現(xiàn)分享接口
這篇文章是微信開發(fā)的很多前置條件，包括了服務(wù)端基于JAVA的獲取和緩存全局的access_token，獲取和緩存全局的jsapi_ticket，以及前端配置授權(quán)組件封裝，調(diào)用分享組件封裝。需要的朋友可以看下2016-12-12
這篇文章介紹了用innerhtml提高頁面打開速度的方法，有需要的朋友可以參考一下2013-08-08
如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法
這篇文章主要給大家介紹了關(guān)于如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
要做一個(gè)異步登錄，打算給用戶做一點(diǎn)提示，所以就網(wǎng)上找了點(diǎn)代碼，自己修改新增了一些，做了一個(gè)html+css+js的功能封裝,供大家參考，需要的朋友參考下吧2017-02-02
前端必知必會(huì)的實(shí)現(xiàn)URL查詢參數(shù)的方法詳解
URL?參數(shù)查詢是指在?URL?中使用問號(hào)（?）后面附加的鍵值對(duì)參數(shù),本文為大家詳細(xì)介紹了前端實(shí)現(xiàn)URL查詢參數(shù)的方法,希望對(duì)大家有所幫助2025-02-02
JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能，非常不錯(cuò)，在一些網(wǎng)站上經(jīng)常會(huì)遇到此功能，需要的的朋友參考下實(shí)現(xiàn)代碼吧2017-03-03
JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)（三）仿微信應(yīng)用
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)（三）仿微信應(yīng)用的相關(guān)資料,需要的朋友可以參考下2015-12-12
微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn)
在做微信小程序開發(fā)時(shí),遇到一個(gè)問題,要如何實(shí)現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
如何通過遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果
JsonDiff是一個(gè)高性能json差異發(fā)現(xiàn)工具,它幾乎可以發(fā)現(xiàn)任何JSON結(jié)構(gòu)的差異,并且將錯(cuò)誤信息反饋給用戶,下面這篇文章主要給大家介紹了關(guān)于如何通過遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果的相關(guān)資料,需要的朋友可以參考下2022-12-12