微信小程序_(表单组件)checkbox与label
微信小程序组件checkbox官方文档 传送门
微信小程序组件label官方文档 传送门
Learn
一、checkbox组件
二、label组件与checkbox组件共用
一、checkbox组件
需要有一个checkbox-group多项选择器去进行组合,内部有多个checkbox组成
disabled:是否禁用【默认值为false】
checked:当前是否选中,可用来设置默认选中【默认值为false】
color:checkbox的颜色,同css的color
当checked为单标签时,点击文字,checkbox组件的checked无相应,当checked为双标签时,点击文字,checkbox组件的checked反向取反
<!--index.wxml-->
<checkbox-group>
<checkbox value='v中国'/> 中国
<checkbox value='v中国' disabled='{{true}}'/> 美国
<checkbox value='v俄国' checked='{{true}}' color='red'>俄国</checkbox>
</checkbox-group> <!-- 通过wx:for循环展示 -->
<checkbox-group>
<view wx:for="{{array}}" wx:key="">
<checkbox value='{{item.name}}' checked='{{item.checkbox}}' color='{{item.color}}' disabled='{{item.disabled}}'>{{item.value}}</checkbox>
</view>
</checkbox-group>
index.wxml
二、label组件与checkbox组件共用
用来改进表单组件的可用性,使用for
属性找到对应的id
,或者将控件放在该标签下,当点击时,就会触发对应的控件
for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件
目前可以绑定的控件有:<button>, <checkbox>, <radio>, <switch>
<!--index.wxml-->
<checkbox-group>
<checkbox value='v中国'/> 中国
<checkbox value='v中国' disabled='{{true}}'/> 美国
<checkbox value='v俄国' checked='{{true}}' color='red'>俄国</checkbox>
</checkbox-group> <!-- 通过wx:for循环 -->
<checkbox-group>
<label wx:for="{{array}}" wx:key="">
<checkbox id="{{item.id}}" value='{{item.name}}' checked='{{item.checkbox}}' color='{{item.color}}' disabled='{{item.disabled}}'/>{{item.value}}
</label>
</checkbox-group> <label for='1001'>测试点击 中国checkbox</label>
index.wxml
Page({
data:{
array:[
{id:"1001",name:"v中国",value:" 中国 ",checked:true,color:"red",disabled:false},
{id:"1002",name:"v美国",value:" 美国 ",checked:false,color:"blue",disabled:false},
{id:"1003",name:"v俄国",value:" 俄国 ",checked:false,color:"pink",disabled: false},
]
}
})
index.js
微信小程序_(表单组件)checkbox与label的更多相关文章
- 微信小程序_(表单组件)button组件的使用
微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发视频的展示页_下
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发用户注册登陆
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序-form表单-获取用户输入文本框的值
微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_简单组件使用与数据绑定
简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...
- 微信小程序_(map)简单的小地图
map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...
- Spring Boot+微信小程序_保存微信登录者的个人信息
1. 前言 微信小程序开发平台,提供有一类 API,可以让开发者获取到微信登录用户的个人数据.这类 API 统称为开放接口. Tip:微信小程序开发平台,会把微信登录用户的个人信息分为明文数据和敏感数 ...
随机推荐
- zookeeper初识
ZOOKEEPER是为分布式系统提供高性能的协调工具 角色: 1.领导者(leader):负责进行投票的发起和决议,更新系统状态2.学习者(learner):包括跟随者(follower)和观察者(o ...
- 弹窗插件 layer
官方网站 http://layer.layui.com/ Github 地址 https://github.com/sentsin/layer //在这里面输入任何合法的js语句 layer.open ...
- 使用SSH连接AWS服务器
使用SSH连接AWS服务器 一直有一台AWS云主机,但是之前在Windows平台都是使用Xshell连接的,换到Ubuntu环境之后还没有试,昨天试了一下,终于使用SSH连接成功了,这里记录一下步骤: ...
- textarea回填数据显示自适应高度
queryTextArea(){ var textAll = document.getElementById('templaInner').querySelectorAll("textare ...
- 2019-11-29-解决从旧格式的-csproj-迁移到新格式的-csproj-格式-AssemblyInfo-文件值重复问题...
title author date CreateTime categories 解决从旧格式的 csproj 迁移到新格式的 csproj 格式 AssemblyInfo 文件值重复问题 lindex ...
- Java的概述
Java的基本概述 Java是SUN(Stanford University Network),斯坦福大学网络公司)1995年推出的一门高级编程语言.Java是一种面向Internet的编程语言.随着 ...
- ACwing 196. 质数距离
#include <bits/stdc++.h> using namespace std; , M = ; int v[M]; long long prime[N],prim[N]; ; ...
- QTP(10)
一.VBS语言基础 1.运算符和表达式 (1)运算符 (2)表达式 a.数学表达式:由算术运算符连接,计算结果为数字 b.字符串表达式:由字符串连接符连接,计算结果为字符串 c.条件表达式:由关系运算 ...
- Appium简介以及环境安装
官网地址 Appium 是一个自动化测试开源工具,支持多平台上的原生应用,web应用和混合应用,是由appium server和appium Client两部分组成通过json wire protoc ...
- 【树形dp 思维题】HHHOJ#483. NOIP司马懿
要注意利用一些题目的特殊条件吧. 题目大意 有一颗$n$个点带点权$a_i$的树,$q$次询问树上是否存在长度为$l$的路径. $n,q,l\le 10^5,0 \le a_i \le 2$ 题目分析 ...