微信小程序多項選擇器checkbox怎么使用

這篇文章主要介紹“微信小程序多項選擇器checkbox怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序多項選擇器checkbox怎么使用”文章能幫助大家解決問題。

第一的話就是我們的相關的布局文件：

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默認樣式</view>
      <label class="checkbox">
        <checkbox value="cb" checked="true"/>選中
      </label>
      <label class="checkbox">
        <checkbox value="cb" />未選中
      </label>
    </view>
  
    <view class="page-section">
      <view class="page-section-title">推薦展示樣式</view>
      <view class="weui-cells weui-cells_after-title">
        <checkbox-group bindchange="checkboxChange">
          <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
            <view class="weui-cell__hd">
              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view class="weui-cell__bd">{{item.name}}</view>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
  
</view>

然后的話就是我們的小程序的邏輯部分：

Page({

  // 在我們的這個位置的話填充我們的相關的數據
  onShareAppMessage(){
    // 在我們的這個位置的話就是闖進我們的相關的方法
    return{
      title: 'checkbox',
      path: 'pages/checkbox/checkbox'
    }
  },
// 然后的話就是填充我們的相關的數據：
data:{
   // 然后的話在我們的這個位置的話就是設置我們的相關的方法
  items:[
    {value:'usa', name:'影響力'},
    { value: 'usa', name: '影響力' },
    { value: 'usa', name: '韭菜的自我修養' },
    { value: 'usa', name: '你的名字' },
    { value: 'usa', name: '怪誕行為學' ,checked: 'true'},
    { value: 'usa', name: '教父' },
    { value: 'usa', name: '經濟學原理' },
    { value: 'usa', name: '三國演義' },
    { value: 'usa', name: '絕對成交' },
    { value: 'usa', name: '行為經濟學講義' },
    { value: 'usa', name: '黑天鵝' },
    { value: 'usa', name: '灰犀牛' },
  ]
},
// 在我們的額這個位置的話就是設置我們的相關的方法

  // 在我們的這個位置的話就是創建一個有參數的構造方法
  checkboxChange(e){
    // 在我們的這位置的話就是在我們的控制臺中輸出我們需要的東西
    console.log('checkbox發生change事件，攜帶value值為：', e.detail.value)
    const items = this.data.items
    const values = e.detail.value
    // 然后的話在我們的這個位置使用我們的for循環來設置創建我們的相關的東西
    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
    }) 
    
  }
})

關于“微信小程序多項選擇器checkbox怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。