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

最新推荐文章于 2023-08-15 17:04:31 发布

asteriaV

最新推荐文章于 2023-08-15 17:04:31 发布

阅读量1.3k

点赞数 1

分类专栏：微信小程序

原文链接：https://www.jb51.net/article/169278.htm

版权

微信小程序专栏收录该内容

34 篇文章 8 订阅

订阅专栏

本文展示了如何在微信小程序中使用WXML和JS实现一个可切换的多选框组。通过绑定`checkboxChange`事件和自定义`checkbox`函数，实现了对多选框选中状态的切换，并在`checkboxChange`事件中记录选中的值。代码示例包括了样式设计和数据结构的设置，便于理解与复用。

摘要由CSDN通过智能技术生成

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
 }