checkbox 选中触发change事件- 微信小程序开发技术要点总结（二）

Hello，我是岚尹~一个热爱技术的项目经理。不定期更新项目管理、前端以及运维相关方面的经验分享~ 如果你对我的文章感兴趣，就请动动你的小手帮赞一下哦。

欢迎关注长期交流~

一、场景

在待办小程序中，我们通过点选checkbox来表明该事项已完成。

也就是说当我们点选该checkbox的时候需要绑定一个触发函数，通过点选事件来触发后续的动作，将值存储起来，这样我们重新进入小程序的时候，待办项的完成情况就还是和上次更新的内容一样。

二、代码实现

按照微信官方文档描述，小程序里面选中单个checkbox，会触发 checkbox-group的change事件。所以我们需要在checkbox标签外面加一个check-group标签，并通过 bindchange 绑定触发事件后的处理函数。

H5 代码：

     <checkbox-group  class="checkcl"  bindchange="checkHandler" wx:key="tid" wx:for="{{todoList}}" wx:for-item="todo" >
       <checkbox  data-time="{{todayTime}}" class="checki" bindtap="ckindex" checked="{{todo.tcheck}}" data-index="{{index}}"> 
       </checkbox>
       <text class="checki" data-time="{{todayTime}}" bindtap="cedit" data-index="{{index}}">{{todo.twork}}
       </text>
      </checkbox-group>

js 代码：

通过e.detail.value.length 获取checkbox的值，如果checkbox被选中，那么该值为1，如果checkbox未选中，该值为0.

checkHandler(e){ //设置当前checkbox的值

let checked =e.detail.value.length;

console.log(checked);

if(checked==1)

{this.setData({checked:true}); }

else

{this.setData({checked:false}); }

},