1.for=‘id’属性关联用法
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
2.label标签嵌套其它标记
<template>
<div class="home">
<label role="radio" :aria-checked="value === 1" class="box">
男<input type="radio" v-model="value" @change="click('男')" />
</label>
<label class="box">女<input type="radio" @change="click('女')" /></label>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
value: 1
}
},
methods: {
click(gender) {
console.log("gender:", gender);
}
}
};
</script>
<style scoped lang="scss">
.box {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
}
input {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
}
</style>
结果:当点击label时,radio会响应
注意:嵌套label不能带for属性,否则点击无效