微信小程序?qū)崿F(xiàn)多選框全選操作
本文實(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: '美國(guó)' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'CHN', ? ? ? ? ? ? ? ? name: '中國(guó)', ? ? ? ? ? ? ? ? checked: 'true' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'BRA', ? ? ? ? ? ? ? ? name: '巴西' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'JPN', ? ? ? ? ? ? ? ? name: '日本' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'ENG', ? ? ? ? ? ? ? ? name: '英國(guó)' ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? ? value: 'FRA', ? ? ? ? ? ? ? ? name: '法國(guó)' ? ? ? ? ? ? } ? ? ? ? ] ? ? }, ? ? 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 { ? ? ? ? ? ? // 沒(méi)有全選狀態(tài) ? ? ? ? ? ? const items = this.data.items ? ? ? ? ? ? for (let i = 0; i < items.length; i++) { ? ? ? ? ? ? ? ? items[i].checked = false ? ? ? ? ? ? } ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? ? items ? ? ? ? ? ? }) ? ? ? ? } ? ? } })
效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)移動(dòng)端微信頁(yè)面禁止字體放大
本文主要介紹了js實(shí)現(xiàn)移動(dòng)端微信頁(yè)面禁止字體放大的方法,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
一般來(lái)說(shuō),JavaScript中的數(shù)組是稀疏的,也就是說(shuō),數(shù)組中的元素之間可以有空隙,因?yàn)橐粋€(gè)數(shù)組其實(shí)就是一個(gè)鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組2012-09-09JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07TypeScript聲明文件的語(yǔ)法與場(chǎng)景詳解
使用ts進(jìn)行開發(fā)的時(shí)候,不可避免的需要引用第三方的 JS 的庫(kù),但是默認(rèn)情況下TS是不認(rèn)識(shí)我們引入的這些JS庫(kù)的,所以在使用這些JS庫(kù)的時(shí)候,我們就要通過(guò)聲明文件告訴TS它是什么,這篇文章主要給大家介紹了關(guān)于TypeScript聲明文件的相關(guān)資料,需要的朋友可以參考下2022-05-05JS監(jiān)聽微信、支付寶等移動(dòng)app及瀏覽器的返回、后退、上一頁(yè)按鈕的事件方法
這篇文章主要介紹了JS監(jiān)聽微信、支付寶等移動(dòng)app及瀏覽器的返回、后退、上一頁(yè)按鈕的事件方法,需要的朋友可以參考下2016-08-08js Cannot set properties of null(se
今天增加功能的時(shí)候,提示Uncaught TypeError: Cannot set properties of null (setting onclick)問(wèn)題分享下,需要的朋友可以參考下2023-06-06