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

没错,H5里的input在微信小程序里是不生效的,因为微信小程序有自己的多选或单选框标签,具体请看下面的代码。 CheckBox多项选择器 CheckBox多项选择器组件,也就是我们常说的复选框,用来进行...

没错,H5里的input在微信小程序里是不生效的,因为微信小程序有自己的多选或单选框标签,具体请看下面的代码。


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

attachments-2020-07-KebHRAr85f21095dabfd3.png


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)
  }

attachments-2020-07-la8e0r2v5f2108cf35c4e.png

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



你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
王凯
王凯

92 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章