微信小程序checkbox组件如何确定哪个选中

官方文档是真的狗

哈哈，成功以后是非常开心的，作为小程序的初学者，以为官方文档肯定没问题，没想到还有bug。我来介绍一下我踩坑。
关于checkbox的微信小程序官方文档

checkbox干什么用

如图，就是有一些选择框，可以打对勾，打了还可以去掉。

我想实现的功能

我想知道哪一项打了勾，哪一项没打，这个表单中有几个没打的。

开始解决问题

一个选择框是一个checkbox，我们先看看checkbox的官方说明

我这里只介绍属性中的checked与value

checked

文档中说了他是bool 类型的，这个其实就是判断你打没打勾，打了勾为true，没打为false。但是我们来看官方文档中的示例代码，有错误。

他给checked的赋值是’true’,加了单引号，那就变成string类型了，我们应该去掉单引号，正确写法

value

其实大家看这个js定义的数组items，其实就类似c语言的结构体，这个value是一个string类型的，代表的是选择框的一个名字或者代号吧。

checkbox-group。

多个checkbox后组成checkbox-group。比如上面的选择框有六个，这六个是一个checkbox-group。

所以说，你打了勾就会触发change事件。

就是以打勾或者去勾都会触发checkboxChange函数。
我们看看官方文档里的这个函数怎么写的。

checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)

    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {//出错了
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items
    })
  }

首先告诉大家两个错误。
1.就是 if (items[i].value === values[j]) 这个怎么用了三个等号。我当时也没在意，他也不报错，结果一直有问题。
2.就是他的官网文档还有个

点一下就直接在你的微信开发者工具里面使用他的这个示例项目，但是这个项目里的代码和他贴在网站上的代码不一样。

来解释一下checkboxChange这个函数，非常有意思

checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail。value)
    //<checkbox-group/>中选中项发生改变是触发 //change 事件，detail = 
    //{value:[选中的checkbox的value的//数组]}

     const items = this.data.items
     const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
       
        if (items[i].name == values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items:items
    })
  }
})

我的理解是，你只要点了选择框，那么这个选择框就会改变，如果是之前有勾那点完就没勾了，之前没勾，点了以后就有勾了。而checkboxChange(e) 函数返回的e.detail.value里面存的是点击以后这个checkbox-group里面所有打勾的value值。
比如下面这个图，如果我点击一下美国的选择框，并且
在checkboxChange(e)函数里输出一下e.detail.value的值

大家看一下console输出的值，有两个值，是chn usa

此时页面变成了

我的建议是大家利用下面的这个语句打一下log
，看一下e.detail.value的值就懂了。
再回来看一下我们的问题
哪一项打了勾，哪一项没打，这个表单中有几个没打的
也就是说，我打勾只会修改这个函数返回的e.detail.value的值，但是

但是我定义的这个items数组的值没变，所以有下面的语句

  const items = this.data.items
     const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
       
        if (items[i].name == values[j]) {
          items[i].checked = true
          break
        }
      }
    }

大家注意一下这句话，至于是name还是value，大家只要相互对应就行，因为返回的e.detail只有value的值，我仔细看了看，发现其实传递的是items中的name,我也不太清楚为什么，大家可以看输出一下。

最后给大家正确的样例

js文件

Page({
  data: {
    items: [
      { name: 'USA', value: '美国',checked: true },
      { name: 'CHN', value: '中国', checked: true},
      { name: 'BRA', value: '巴西',checked: false },
      { name: 'JPN', value: '日本' ,checked: true},
      { name: 'ENG', value: '英国' ,checked: true},
      { name: 'TUR', value: '法国' ,checked: true},
    ]
  },
  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)//<checkbox-group/>中选中项发生改变是触发 //change 事件，detail = {value:[选中的checkbox的value的//数组]}
    console.log(this.data.items)
     const items = this.data.items
     const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
       
        if (items[i].name == values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
     items:items
     })
   }
})

wxml 文件

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

wxss文件

.intro {
  margin: 30px;
  text-align: center;
}

有什么问题欢迎与我讨论