回复 刷新

暂无评论

微信小程序学习实践记录《六》:checkbox控件和label标签

本系列已获作者授权,作者为IT小痞子

checkbox控件

复选框控件,实现多重选择功能。通过checkbox-group标签,包裹所以checkbox标签来实现,中间可以嵌入其他控件。

1.控件属性

注意:disabled不是不能选中,是禁止交互,如果一个checkbox的checked设置为true,disabled设置为true,该项也会被选中,只是不能进行点击交互。

2.代码实现

2.1>  wxml文件的代码

[html] view plain copy
  1. <checkbox-group bindchange="checkboxChange">  
  2.   <!--中间嵌入了text和button控件-->  
  3.   <text>中间可以嵌入其他控件</text>  
  4.   <button size="default" type="primary">这是嵌入的button控件</button>  
  5.   <!--checkbox-group标签包裹多个checkbox标签,数据通过.js中的变量获取-->  
  6.   <label class="checkbox" wx:for="{{items}}">  
  7.     <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>{{item.value}}  
  8.   </label>  
  9. </checkbox-group>  

2.2> .js控制层的代码

[javascript] view plain copy
  1. Page({  
  2.   data: {  
  3.     items: [  
  4.       {name: 'USA', value: '美国'},  
  5.       //checked为truetrue,所以该项默认选中  
  6.       {name: 'CHN', value: '中国', checked: 'true'},  
  7.       {name: 'BRA', value: '巴西'},  
  8.       // disabled为truetrue,所以该项不能被点击,checked为truetrue,默认选中,但是不能点击  
  9.       {name: 'JPN', value: '日本',disabled:'true', checked: 'true'},  
  10.       {name: 'ENG', value: '英国'},  
  11.       {name: 'TUR', value: '法国'},  
  12.     ]  
  13.   },  
  14.   // checkbox点击的时候会执行这个方法  
  15.   checkboxChange: function(e) {  
  16.     console.log('checkbox发生change事件,携带value值为:', e.detail.value)  
  17.   }  
  18. })  

3.label标签

label标签与html中的标签作用完全一样,把checkbox上显示的每个选项的内容与选择框进行绑定,实现点击文字也能选中该项目

4.整体效果

  • 1
  • 0
  • 0