微信小程序?qū)崿F(xiàn)多選框全選操作
更新時間:2022年07月18日 14:10:08 作者:凡小多
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多選框全選操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)多選框全選的具體代碼,供大家參考,具體內(nèi)容如下
test.wxml
<view class="container"> ? ? <!-- 多選框 --> ? ? <view class="page-body"> ? ? ? ? <view class="page-section"> ? ? ? ? ? ? <view class="page-section-title">推薦展示樣式</view> ? ? ? ? ? ? <view class="weui-cells weui-cells_after-title"> ? ? ? ? ? ? ? ? <checkbox-group bindchange="checkboxChange"> ? ? ? ? ? ? ? ? ? ? <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}"> ? ? ? ? ? ? ? ? ? ? ? ? <view class="weui-cell__hd"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <checkbox value="{{item.value}}" checked="{{item.checked}}" /> ? ? ? ? ? ? ? ? ? ? ? ? </view> ? ? ? ? ? ? ? ? ? ? ? ? <view class="weui-cell__bd">{{item.name}}</view> ? ? ? ? ? ? ? ? ? ? </label> ? ? ? ? ? ? ? ? </checkbox-group> ? ? ? ? ? ? </view> ? ? ? ? </view> ? ? </view> ? ? <text>全選</text> ? ? <checkbox-group bindchange="checkboxAll"> ? ? ? ? <checkbox checked="{{checkedAll}}" /> ? ? </checkbox-group> </view>
test.js
Page({ ? ? data: { ? ? ? ? checkedAll: "", ? ? ? ? items: [{ ? ? ? ? ? ? ? ? value: 'USA', ? ? ? ? ? ? ? ? name: '美國' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'CHN', ? ? ? ? ? ? ? ? name: '中國', ? ? ? ? ? ? ? ? checked: 'true' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'BRA', ? ? ? ? ? ? ? ? name: '巴西' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'JPN', ? ? ? ? ? ? ? ? name: '日本' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'ENG', ? ? ? ? ? ? ? ? name: '英國' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'FRA', ? ? ? ? ? ? ? ? name: '法國' ? ? ? ? ? ? } ? ? ? ? ] ? ? }, ? ? checkboxChange(e) { ? ? ? ? console.log('checkbox發(fā)生change事件,攜帶value值為:', e.detail.value) ? ? ? ? const items = this.data.items ? ? ? ? const values = e.detail.value ? ? ? ? for (let i = 0, lenI = items.length; i < lenI; ++i) { ? ? ? ? ? ? items[i].checked = false ? ? ? ? ? ? for (let j = 0, lenJ = values.length; j < lenJ; ++j) { ? ? ? ? ? ? ? ? if (items[i].value === values[j]) { ? ? ? ? ? ? ? ? ? ? items[i].checked = true ? ? ? ? ? ? ? ? ? ? break ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? this.setData({ ? ? ? ? ? ? items ? ? ? ? }) ? ? ? ? if (e.detail.value.length == 6) { ? ? ? ? ? ? console.log(this.data.checkedAll); ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? ? checkedAll: true ? ? ? ? ? ? }) ? ? ? ? }else{ ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? ? checkedAll: "" ? ? ? ? ? ? }) ? ? ? ? } ? ? }, ? ? checkboxAll(e) { ? ? ? ? if (e.detail.value.length == 1) { ? ? ? ? ? ? // 全選狀態(tài) ? ? ? ? ? ? const items = this.data.items ? ? ? ? ? ? for (let i = 0; i < items.length; i++) { ? ? ? ? ? ? ? ? items[i].checked = true ? ? ? ? ? ? } ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? ? items ? ? ? ? ? ? }) ? ? ? ? } else { ? ? ? ? ? ? // 沒有全選狀態(tài) ? ? ? ? ? ? const items = this.data.items ? ? ? ? ? ? for (let i = 0; i < items.length; i++) { ? ? ? ? ? ? ? ? items[i].checked = false ? ? ? ? ? ? } ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? ? items ? ? ? ? ? ? }) ? ? ? ? } ? ? } })
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
一般來說,JavaScript中的數(shù)組是稀疏的,也就是說,數(shù)組中的元素之間可以有空隙,因?yàn)橐粋€數(shù)組其實(shí)就是一個鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組2012-09-09JavaScript實(shí)現(xiàn)網(wǎng)頁計算器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁計算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法
這篇文章主要介紹了JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法,需要的朋友可以參考下2016-08-08js Cannot set properties of null(se
今天增加功能的時候,提示Uncaught TypeError: Cannot set properties of null (setting onclick)問題分享下,需要的朋友可以參考下2023-06-06