WeChat小程序表单篇~选择按钮

小程序选择按钮

• 多选按钮
• 单选按钮

checkbox-group

解释

小程序多选按钮,内部有多个checkbox组件组成

属性

• checkbox-group

事件	类型	默认值	说明
bindchange	EventHandle		中选中改变触发change事件，detail={value:[checkbox的value数组]}

• checkbox

属性	类型	默认值	说明
value	String		的value标识，change事件触发后携带值
disabled	Boolean	false	不可点
checked	Boolean	false	为true时，默认选中状态
color	Color		checkbox小对勾的颜色

展示

checkbox-group多选项

使用

    
      默认选择样式
      
        选中
      
      
        未选中
      
    

    
      多选展示样式
      
        
          
            
              
            
            {{item.name}}
          
        
      
    

checkboxChange: function(e) {
    console.log('checkboxChange事件，携带value值为：', e.detail.value);
    var items = this.data.items, values = e.detail.value;
    for (var i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false;
      // items[i].color="red";
      for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
        if(items[i].value == values[j]){
          items[i].checked = true;//选中
          items[i].color="black";//改变颜色
          items[i].disabled=true;//设置不可点
          break
        }
      }
    }

    this.setData({
      items: items
    })
  }

radio

解释

小程序的单选按钮,内部有多个组成

属性

• radio-group

事件	类型	默认值	说明
bindchange	EventHandle		中选中改变触发change事件，detail={value:选中radio的value值}

-radio

属性	类型	默认值	说明
value	String		的value标识，change事件触发后携带值
disabled	Boolean	false	不可点
checked	Boolean	false	为true时，默认选中状态
color	Color		radio小对勾的颜色

演示

radio单选按钮

代码

 
      推荐展示样式
      
        
          

            
              
            
            {{item.name}}
          
        
      
    

  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)

    var items = this.data.items;
    for (var i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
      if(items[i].checked){
        items[i].name = items[i].name + "选中了";
      }
    }
    this.setData({
      items: items
    });
  }