html label标签 hidde,label标签

本文编辑：  DevelopeWhite浏览 3965 4

版权所有，严禁转载

组件说明:

label标签，和html的label极其类似。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，就会自动将焦点转到和标签绑定的表单控件上，主要用来改进表单组件的可用性。

使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：, , ,

组件用法：

wxml

-------label绑定checkbox(内嵌)-------

{{item.value}}

---------label绑定radio(for)---------

{{item.name}}

-----------label绑定button-----------

label绑定button(for)

Fly-1

label绑定button(内嵌)

Fly-2

-----------label绑定switch-----------

label绑定switch( for)

label绑定switch(内嵌)

label绑定switch(内嵌)

js

Page({

data: {

checkboxItems: [

{name: 'ctrip', value: '携程', checked: 'true'},

{name: 'qunar', value: '去哪儿'},

{name: 'tuniu', value: '途牛'}

],

radioItems: [

{name: 'ctrip', value: '携程'},

{name: 'qunar', value: '去哪儿', checked: 'true'},

{name: 'tuniu', value: '途牛'}

],

hidden: false

},

checkboxChange: function(e) {

var checked = e.detail.value

var changed = {}

for (var i = 0; i < this.data.checkboxItems.length; i ++) {

if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {

changed['checkboxItems['+i+'].checked'] = true

} else {

changed['checkboxItems['+i+'].checked'] = false

}

}

this.setData(changed)

},

radioChange: function(e) {

var checked = e.detail.value

var changed = {}

for (var i = 0; i < this.data.radioItems.length; i ++) {

if (checked.indexOf(this.data.radioItems[i].name) !== -1) {

changed['radioItems['+i+'].checked'] = true

} else {

changed['radioItems['+i+'].checked'] = false

}

}

this.setData(changed)

},

testLabelBindButton_1:function(){

console.log("奔走相告，button通过for可以绑定成功啦！！！");

},

testLabelBindButton_2:function(){

console.log("奔走相告，button通过内嵌可以绑定成功啦！！！");

}

})

wxss

.label-1, .label-2{

margin-bottom: 15px;

}

.label-1__text, .label-2__text {

display: inline-block;

vertical-align: middle;

}

.label-1__icon {

position: relative;

margin-right: 10px;

display: inline-block;

vertical-align: middle;

width: 18px;

height: 18px;

background: #CAE1FF;

}

.label-1__icon-checked {

position: absolute;

top: 3px;

left: 3px;

width: 12px;

height: 12px;

background: #1aad19;

}

.label-2__icon {

position: relative;

display: inline-block;

vertical-align: middle;

margin-right: 10px;

width: 18px;

height: 18px;

background: #CAFF70;

border-radius: 50px;

}

.label-2__icon-checked {

position: absolute;

left: 3px;

top: 3px;

width: 12px;

height: 12px;

background: #1aad19;

border-radius: 50%;

}

.section__title{

display: block;

text-align: center;

color: #9400D3;

}

.content{

padding-bottom: 15px;

}

主要属性：属性

类型

类型

for

String

绑定控件的 id(该id和需要被绑定的表单控件的id一模一样才生效)