微信小程序  checkbox组件详解及简单实例

 微信小程序表单组件 checkbox

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现效果图：

checkbox-group

多选项目组，内部由多个checkbox组成。

checkbox-group内只能包含checkbox

属性名 类型 默认值 说明
bindchange EventHandle   checkbox-group中选中项发生改变是触发change事件，detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性名 类型 默认值 说明
value String   checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中，可用来设置默认选中

示例：

<checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for-items="{{items}}">
 <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</checkbox-group>
Page({
 data: {
 items: [
 {name: 'USA', value: '美国'},
 {name: 'CHN', value: '中国', checked: 'true'},
 {name: 'BRA', value: '巴西'},
 {name: 'JPN', value: '日本'},
 {name: 'ENG', value: '英国'},
 {name: 'TUR', value: '法国'},
 ]
 },
 checkboxChange: function(e) {
 console.log('checkbox发生change事件，携带value值为：', e.detail.value)
 }
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序（十五）checkbox组件详细介绍

    微信小程序（十五）checkbox组件详细介绍

    不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-group(只能包含checkbox)中设置监听事件. checkbox-group监听方法: checkbox多选属性: wxml <!--checkbox-group就是一个checkbox组 有个监听事件bindchange,监听数据选中和取消--> <checkbox-group bindchange="listenChec

  • 微信小程序 checkbox使用实例解析

    微信小程序 checkbox使用实例解析

    这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图如下: 实例代码如下: type_add.js // pages/detail_add/detail_add.js Page({ /** * 页面的初始数据 */ data: { selectData: "", //下拉列表的数据 height: 20, focus: false }, checkboxChange: fun

  • 微信小程序如何修改radio和checkbox的默认样式和图标

    微信小程序如何修改radio和checkbox的默认样式和图标

    wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? </view> <view class="label">单选</view> </view> <view class="options"> <radio-group class="radio-gr

  • 微信小程序修改checkbox的样式代码实例

    微信小程序修改checkbox的样式代码实例

    这篇文章主要介绍了微信小程序修改checkbox的样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 修改前: 修改后: wxml代码: <checkbox class="checkbox" /> wxss代码: /* checkbox选中钱样式 */ checkbox{ transform: scale(0.7,0.7); } /* checkbox选中后样式 */ checkbox .wx-checkbox-i

  • 微信小程序checkbox组件使用详解

    本文为大家分享了微信小程序checkbox组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <view class="tui-menu-

  • 微信小程序单选radio及多选checkbox按钮用法示例

    本文实例讲述了微信小程序单选radio及多选checkbox按钮用法.分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ v

  • 微信小程序使用checkbox显示多项选择框功能【附源码下载】

    本文实例讲述了微信小程序使用checkbox显示多项选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <checkbox-group bindchange="checkboxgroupBindchange"> <checkbox value="checkbox1">checkbox1</checkbox> <checkbox value="checkbox2&quo

  • 微信小程序 checkbox组件详解及简单实例

    微信小程序 checkbox组件详解及简单实例

     微信小程序表单组件 checkbox 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: checkbox-group 多选项目组,内部由多个checkbox组成. checkbox-group内只能包含checkbox 属性名

  • 微信小程序  checkbox组件详解及简单实例

    微信小程序  checkbox组件详解及简单实例

     微信小程序表单组件 checkbox 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: checkbox-group 多选项目组,内部由多个checkbox组成. checkbox-group内只能包含checkbox 属性名

  • 微信小程序 picker-view 组件详解及简单实例

    微信小程序 picker-view 组件详解及简单实例

    picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器 属性名 类型 默认值 说明 value Number Array   数组中的数字依次表示 picker-view 内的 picker

  • 微信小程序 label 组件详解及简单实例

    微信小程序 label 组件详解及简单实例

    微信小程序label 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件. for优先级高于内部控件,内部有多个控件的时候

  • 微信小程序 Button 组件详解及简单实例

    微信小程序 Button 组件详解及简单实例

    微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样

  • 微信小程序 textarea 组件详解及简单实例

    微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 多行输入框. 属性名 类型 默认值 说明 value String   输入框的内容 placeholder String   输入框为空时占位符 placehold

  • 微信小程序 form组件详解及简单实例

    微信小程序 form组件详解及简单实例

    微信小程序form 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 将表单内的用户输入的switch input checkbox slider radio picker 提交 当点击 <form/> 表单中 formType

  • 微信小程序 picker 组件详解及简单实例

    微信小程序 picker 组件详解及简单实例

    微信小程序picker 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序picker 滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器 普通选择器:mode=

  • 微信小程序 switch组件详解及简单实例

    微信小程序 switch组件详解及简单实例

    微信小程序switch 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 开关选择器 属性名 类型 默认值 说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 typ

  • 微信小程序 input输入框详解及简单实例

    微信小程序 input输入框详解及简单实例

    微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String   输入框的内容 type String text input的类型,

随机推荐