微信小程序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í)有所幫助，也希望大家多多支持腳本之家。
javascript設(shè)計(jì)模式之中介者模式Mediator
這篇文章主要介紹了javascript設(shè)計(jì)模式之中介者模式Mediator,需要的朋友可以參考下
2014-12-12 
asp javascript 實(shí)現(xiàn)關(guān)閉窗口時(shí)保存數(shù)據(jù)的辦法
asp javascript 實(shí)現(xiàn)關(guān)閉窗口時(shí)保存數(shù)據(jù)的辦法...
2007-11-11 
千萬(wàn)別錯(cuò)過(guò)的JavaScript?sort方法使用指南
sort方法在我們的日常開發(fā)中是經(jīng)常使用的，sort方法一般是用來(lái)對(duì)數(shù)組進(jìn)行排序的，但是你是否知道sort方法默認(rèn)是按什么方式排序的呢？下面就和我一起來(lái)深入了解sort方法吧
2023-05-05 
JavaScript創(chuàng)建對(duì)象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對(duì)象的方式有很多，通過(guò) Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對(duì)象，顯然這兩種方式會(huì)產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對(duì)象的方式，希望對(duì)大家有所幫助
2022-11-11 
JavaScript 解決ajax中parsererror錯(cuò)誤案例詳解
這篇文章主要介紹了JavaScript 解決ajax中parsererror錯(cuò)誤案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08 
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03 
這篇文章主要介紹了JS全局變量和局部變量最新解析的相關(guān)知識(shí)，本文給給大家補(bǔ)充js刪除局部變量的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06 
JavaScript中數(shù)組slice和splice的對(duì)比小結(jié)
相信對(duì)很多學(xué)習(xí)JavaScript語(yǔ)言的人來(lái)說(shuō)，都會(huì)經(jīng)常搞不清slice和splice這兩個(gè)方法。它們雖然名稱相似，但是功能卻完全不同。所以這篇文章就給大家詳細(xì)整理了關(guān)于JavaScript中數(shù)組slice和splice的對(duì)比，有需要的可以參考學(xué)習(xí)。
2016-09-09 
js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
在實(shí)際項(xiàng)目中，遇到一個(gè)問(wèn)題，首先彈出一個(gè)新窗口，新窗口中放了一個(gè)TreeView控件，現(xiàn)在要解決的是，如何單擊TreeView中一個(gè)節(jié)點(diǎn)，返回Text和Value到父頁(yè)面并關(guān)閉該新窗口,本文將詳細(xì)介紹此方法的實(shí)現(xiàn)
2012-11-11