iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现多选框全选操作
  • 689
分享到

微信小程序实现多选框全选操作

2024-04-02 19:04:59 689人浏览 安东尼
摘要

本文实例为大家分享了微信小程序实现多选框全选的具体代码,供大家参考,具体内容如下 test.wxml <view class="container">     <!

本文实例为大家分享了微信小程序实现多选框全选的具体代码,供大家参考,具体内容如下

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发生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) {
            // 全选状态
            const items = this.data.items
            for (let i = 0; i < items.length; i++) {
                items[i].checked = true
            }
            this.setData({
                items
            })
        } else {
            // 没有全选状态
            const items = this.data.items
            for (let i = 0; i < items.length; i++) {
                items[i].checked = false
            }
            this.setData({
                items
            })
        }
    }
})

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现多选框全选操作

本文链接: https://www.lsjlt.com/news/164502.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现多选框全选操作
    本文实例为大家分享了微信小程序实现多选框全选的具体代码,供大家参考,具体内容如下 test.wxml <view class="container">     <!...
    99+
    2024-04-02
  • 微信小程序实现多层级复选框菜单
    目录一、背景二 、效果展示三、功能点四、代码实现五 、最后本文实例为大家分享了微信小程序自定义多层级复选框菜单的具体代码,供大家参考,具体内容如下 一、背景 因客户需要,有一个功能是...
    99+
    2024-04-02
  • 微信小程序实现下拉选项框
    本文实例为大家分享了微信小程序实现下拉选项框的具体代码,供大家参考,具体内容如下 效果图 test.js   data: {     shows: false, //控制下拉列表...
    99+
    2024-04-02
  • 微信小程序实现多列选择器
    本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下 <picker class="picks" mode="multiSelector" bind...
    99+
    2024-04-02
  • 微信小程序实现时间选择
    本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下  xml:  <view class="day-check" style=...
    99+
    2024-04-02
  • 微信小程序实现单选按钮
    本文实例为大家分享了微信小程序实现单选按钮的具体代码,供大家参考,具体内容如下 逻辑 单选框的逻辑比较简单,把所有的元素遍历出来,等到点击单选按钮的时候,当value值与遍历变量值一...
    99+
    2024-04-02
  • 微信小程序自定义复选框
    本文实例为大家分享了微信小程序自定义复选框的具体代码,供大家参考,具体内容如下 1、效果  2、wxml <checkbox-group bindchange="c...
    99+
    2024-04-02
  • 怎么使用Vue.js全选指令实现多选框的全选操作
    这篇“怎么使用Vue.js全选指令实现多选框的全选操作”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用Vue.js全选...
    99+
    2023-07-06
  • 微信小程序自定义单选框样式实现单选功能
    本文实例为大家分享了微信小程序自定义单选框样式实现单选功能的具体代码,供大家参考,具体内容如下 实现效果: 选择小车时,其他类型的车取消选中。 具体思路: 用数组存几种类型车的数据...
    99+
    2024-04-02
  • 微信小程序实现课程选择器
    本文实例为大家分享了微信小程序实现课程选择器的具体代码,供大家参考,具体内容如下 话不多说,直接上效果图 代码如下 wxml <view class="urg_input"&...
    99+
    2024-04-02
  • 微信小程序多项选择器checkbox
    本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下 第一的话就是我们的相关的布局文件: <view class="container...
    99+
    2024-04-02
  • 微信小程序如何实现选项卡
    这篇文章主要介绍了微信小程序如何实现选项卡,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 微信小程序之选项卡的实现方法前言:从事前...
    99+
    2024-04-02
  • 微信小程序自定义组件实现多选功能
    本文实例为大家分享了微信小程序自定义组件实现多选的具体代码,供大家参考,具体内容如下 效果图: 调用部分(例如在index页面) index.wxml <view catch...
    99+
    2024-04-02
  • JavaScript实现复选框全选或全取消操作
    本文实例为大家分享了JavaScript实现复选框全选或全取消的具体代码,供大家参考,具体内容如下 实现思路 1、获取总选框、所有小选框元素对象 2、按钮控制小按钮- - -给总选...
    99+
    2024-04-02
  • 微信小程序实现选项卡的方法
    本文实例为大家分享了微信小程序实现选项卡的具体代码,供大家参考,具体内容如下 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功...
    99+
    2024-04-02
  • 微信小程序实现性别单选效果
    本文实例为大家分享了微信小程序实现性别单选的具体代码,供大家参考,具体内容如下 效果图: 代码: html: <view class="inputbox">      ...
    99+
    2024-04-02
  • 微信小程序picker选择器怎么实现
    本篇内容主要讲解“微信小程序picker选择器怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序picker选择器怎么实现”吧!picker选择器分为三种,普通选择器,时间选择器,...
    99+
    2023-06-26
  • 微信小程序开发框架怎么选择
    这篇“微信小程序开发框架怎么选择 ”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序开发框架怎么选择 ”文章吧。从数据...
    99+
    2023-06-26
  • 微信小程序实现日期范围选择
    本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下 样式如下: 分别点击开始日期和结束日期选择时间(底部弹框): date.wxml:  <...
    99+
    2024-04-02
  • 微信小程序实现列表条件筛选
    本文实例为大家分享了微信小程序实现列表条件筛选的具体代码,供大家参考,具体内容如下 最近一个旅游项目,关于筛选框的代码 wxml文件  <view class='ch...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作