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

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

 

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




 


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

在wxml中使用CheckBox布局

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

 

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

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




 

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




你可能会用到以下内容:

微信小程序checkbox多选框如何修改宽高及选中样式
 

微信小程序checkbox多选框如何全选反选

微信小程序获取复选框全选,反选选中的值

H5的多选框在微信小程序上不生效解决

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/934.html