微信小程序自定义复选框

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

1、效果

2、wxml

<checkbox-group bindchange="checkboxChange" class="checkbox-group">
     <view wx:for="{{checkboxArr}}" wx:key="index" class="padding-xs">
            <label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap='checkbox' data-index="{{index}}">
       <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
            </label>
     </view>
</checkbox-group>

3、js

data:{
 
 checkboxArr: [
  {
   checked: false,//是否选中
   id: "1",//部门能id
   name: "部门1",
  },
  {
   checked: false,//是否选中
   id: "2",//部门能id
   name: "部门2",
  },
  {
   checked: false,//是否选中
   id: "3",//部门能id
   name: "部门3",
  },
  {
   checked: false,//是否选中
   id: "4",//部门能id
   name: "部门4",
  },
  {
   checked: false,//是否选中
   id: "5",//部门能id
   name: "部门5",
  },
  {
   checked: false,//是否选中
   id: "6",//部门能id
   name: "部门6",
  },]
},
 checkbox: function (e) {
  var index = e.currentTarget.dataset.index;//获取当前点击的下标
  var checkboxArr = this.data.checkboxArr;//选项集合
  checkboxArr[index].checked = !checkboxArr[index].checked;//改变当前选中的checked值
 
  this.setData({
   checkboxArr: checkboxArr
  });
 },
 checkboxChange: function (e) {
  var checkValue = e.detail.value;
  console.log(e.detail.value)
  this.setData({
   checkValue: checkValue
  });
 },

4、wxss 局部样式

 .checkbox-group{
 display: flex;
 flex-wrap: wrap;
 }
 .checkbox{
  display: flex;
  align-items: center;
  padding: 10rpx;
  color: #aaaaaa;
  border: 2rpx solid #CECECE;
  border-radius: 5rpx;
 justify-content: center;
 margin-right: 20rpx;
 }
.checked{
  color: #3eace2;
  background: rgba(49,165,253,0.08);
  border: 1rpx solid #3eace2;
 }
 .checkbox-group checkbox{
  display: none
 }

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

(0)

相关推荐

  • 微信小程序获取复选框全选反选选中的值(实例代码)

    wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap="selectall" />全选 </view> <view class="th">id</view> <view class="th">名称</view> </view> <

  • 微信小程序实现复选框效果

    本文实例为大家分享了微信小程序实现复选框片展示的具体代码,供大家参考,具体内容如下 样式部分你们自由发挥,反正这里是什么都没写的,选中和没选中直接用这个this.data.arrStatus[checkIndex]去判断就行了,之后你们都懂的. 效果预览: js部分 // page/index/index.js Page({ /** * 页面的初始数据 */ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value:

  • 微信小程序 自定义复选框实现代码实例

    功能: 1.需要多选复选框,并且可以上拉滚动: 2.需要通过名称手写字母排序的,并且可以上拉滚动: 常规的小程序自带的原生picker无法满足我们的要求,因此一些特殊效果需要我们自定义来实现,废话不多说,我们直接看效果: index.wxml布局 <view class="container"> <view class='class bgFFF' bindtap='isDep'> <view class='class-text'> <text

  • 微信小程序复选框实现多选一功能过程解析

    这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 功能实现界面 data: { checkboxItems: [ { name: '全天(1-8节)', value: 'allday' }, { name: '上午(1-4节)', value: 'am' }, { name: '下午(5-8节)', value: 'pm' }, { name: '晚上(晚自习)', value: 'nigh

  • 微信小程序自定义复选框

    本文实例为大家分享了微信小程序自定义复选框的具体代码,供大家参考,具体内容如下 1.效果 2.wxml <checkbox-group bindchange="checkboxChange" class="checkbox-group">      <view wx:for="{{checkboxArr}}" wx:key="index" class="padding-xs">   

  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false

  • 微信小程序实现多选框全选与取消全选功能示例

    本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11

  • 微信小程序自定义纯净模态框(弹出框)的实例代码

    由于官方API提供的模态框只能显示简单的文字,但是在实际应用场景中,我们需要模态框上能够显示各种各样的组件和样式,所以,以此为基础模拟出一套可以供大家自定义的纯净版的模态框,满足大家各式各样的需求. 效果图: WXML: <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"

  • 微信小程序实现多选框功能的实例代码

    我们先来看看效果: 两种状态: 选中/不选中 wxml <!-- 选择 S --> <view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}"

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

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

  • 微信小程序自定义多选事件的实现代码

    要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单的是自己绑定事件,然后切换选择和未选择的图片.而小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断. 直接上代码: wxml: <view class="sel-box"> /**用wx:for来进行列表渲染**/ <view wx:for="{{repContent}}" class="mu

随机推荐