微信小程序多选项目 checkbox & checkbox-group 组件

太过爱你忘了你带给我的痛 2021-09-08 00:26 535阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

多项选择器(checkbox - group),内部由多个-checkbox组成。checkbox多项选择器组件,和HTML中的多选框是一样的,用来进行多项选择。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html" rel="nofollow">checkbox</a>标识，选中时触发<a href="https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html" rel="nofollow">checkbox-group</a>的 change 事件，并携带 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html" rel="nofollow">checkbox</a> 的 value</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">disabled</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否禁用</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">checked</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">当前是否选中，可用来设置默认选中</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">string</td> 
   <td align="left">#09BB07</td> 
   <td align="left">否</td> 
   <td align="left">checkbox的颜色，同css的color</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

[在开发者工具中预览效果][Link 1]

index.wxml

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

index.js

Page({ 
      data: { 
        items: [
          {  name: 'USA', value: '美国' },
          {  name: 'CHN', value: '中国', checked: 'true' },
          {  name: 'BRA', value: '巴西' },
          {  name: 'JPN', value: '日本' },
          {  name: 'ENG', value: '英国' },
          {  name: 'TUR', value: '法国' },
        ]
      },
      checkboxChange: function (e) { 
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
      }
    })

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RZot32h7-1622196277756)(image-20210528100523992.png)\]][img-RZot32h7-1622196277756_image-20210528100523992.png]  
多项选择器，内部由多个[checkbox][]组成。

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/s/hGa3DcmW6qYw
[img-RZot32h7-1622196277756_image-20210528100523992.png]: /images/20210716/dfd9a4fdeeb34028b5d2bfa3959ad9b8.png
[checkbox]: https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html