微信小程序checkbox多选框的写法

开发微信小程序时会发现H5的复选框失效了，原因是微信小程序自带复选框标签，虽然小程序与H5很多时候标签都是公用的，但也有部分区别，就比如现在的checkbox多选框问题，具体请看下面的代码。...

开发微信小程序时会发现H5的复选框失效了，原因是微信小程序自带复选框标签，虽然小程序与H5很多时候标签都是公用的，但也有部分区别，就比如现在的checkbox多选框问题，具体请看下面的代码。

看一看微信小程序的CheckBox多项选择器

checkbox-group是用来容纳多个CheckBox的容器，它有一个绑定事件bindchange，<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

举个例子

在wxml中使用CheckBox布局

<checkbox-groupbindchange="checkboxChange">
<checkboxvalue='football'>足球</checkbox>
<checkboxvalue='basketball'checked='true'>篮球</checkbox>
<checkboxvalue='baseball'>棒球</checkbox>
<checkboxvalue='pingpang'disabled>乒乓球</checkbox>
</checkbox-group>

在js里，添加checkboxChange事件函数，获取复选框的值，将其打印出来

checkboxChange:function(e){
    console.log(e.detail.value)
  }

被禁用的复选框是不能进行使用的，CheckBox-group上面绑定的bindchange事件，每次勾选时，会将所勾选的复选框值以数组的形式存在detail里

发表于 2020-07-29 13:38
阅读 ( 652 )
分类：web前端开发

微信小程序checkbox多选框的写法

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »