js復選框全選反選（js獲取checkbox是否選中）

checkbox復選框與上一章講的radio 單選框的屬性相似，表現在：

1、可以通過color屬性來修改顏色；

2、需搭配checkbox-group 一起使用。

checkbox復選框與radio 單選框不同的地方在于：

checkbox可同時選擇多個元素，不是單一的選項。

啥意思呢？有點不懂？

來，上需求：

設置三個水果選項，選中其中任意一個，下面都有提示文字。

操作步驟如下：

1、新建頁面demo16

2、打開demo16.js 文件，只保留data部分，其余刪除。添加數組list，寫入如下代碼：

Page({
  data: {
    list:[
      {
        id:0,
        name:"",
        value:"apple"
      },
      {
        id:1,
        name:"",
        value:"grape"
      },
      {
        id:2,
        name:"",
        value:"bananer"
      }
    ],
    checkedList:[]
  },

})

3、打開demo16.wxml文件刪除原先的代碼，寫入如下代碼，進行渲染。

<view>
<checkbox-group bindchange=" ">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
</checkbox>

</checkbox-group>

</view>

保存后，小程序頁面出現三個選項，如下圖：

4、使用checkbox-group 綁定事件”handleitemchange”，代碼如下：

<view>
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
</checkbox>

</checkbox-group>

</view>

5、復制事件”handleitemchange”，回到demo16.js文件中粘貼，

并且在list數獨后加如下代碼，其中的意義如下注釋：

// 復選框的選中事件
handleItemChange(e){

// 1 獲取被選中的復選框的值
const checkedList=e.detail.value;

// 2 進行賦值
this.setData({
checkedList
})
}

ps：這里注意的一點是：

這一步demo16.js文件中的復選框的選中事件”handleitemchange”，

應來自demo16.wxml文件中的事件”handleitemchange”！

一定要把demo16.wxml文件中的事件”handleitemchange” 復制粘貼至demo15.js文件中，才能完成渲染?。。?/strong>

6、回到demo16.wxml文件中，在view標簽中再加入一個view標簽，如下：

<view>
選中的水果:{{checkedList}}
</view>

保存后，小程序頁面如下：

我們可以同時選中三個選項，下面具有相應的提示文字。

這也就解釋了checkbox復選框與radio 單選框不同的地方在于：

checkbox可同時選擇多個元素，不是單一的選項。

這一含義。

至此，我們的需求就完成了，已實現設置三個水果選項，選中其中任意一個，下面都有提示文字。

是不是很簡單，哈哈。

其余基礎知識請移步官方文檔~