本文介绍如何利用HTML的label标签实现点击文字控制input元素的效果，包括复选框和单选框。通过for属性与input的id匹配，使得用户点击label文字时，能触发相关控件并聚焦。建议使用包裹input的方式，简化代码并方便后期维护。
先来测试一段代码，点击文字有效果的会用红色标注！
<body>
<label><input type="checkbox"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="checkbox"/>
沪深A股
</label>
<div>
<input type="checkbox"/>
<label>沪深A股</label>
</div>
<div>
<input id="checkboxId" type="checkbox"/>
<label for="checkboxId">沪深A股</label>
</div>
<div for="checkboxId">
<input id="checkboxId" type="checkbox"/>
沪深A股
</div>
<input id="checkboxId" type="checkbox"/>
<div for="checkboxId">
沪深A股
</div>
<p>
<label>
<input type="button" value="沪深A股"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="checkbox"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="file"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="image"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="password"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="radio"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="reset"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="submit"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="text"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="hidden"/>
<span>沪深A股</span>
</label>
</body>
为什么要选择label标签做例子,请看：http://www.w3school.com.cn/tags/tag_label.asp
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
首先来说下1-6为什么只有1、2、4有效果！
要使label有效果，要么放在label内，要么用id告诉label，除了label外我们还用了其他标签与label的for=”id"显然没有效果，这个功能是lablel独有的。
除了复选框，还有其他的input标签做实验，只有hidden隐藏的看不出点击文字有效果外，均点击文字有效果。
（建议使用第一种input，因为节省代码，改变文字部分时也不会很麻烦。）
（不要使用第四种，因为要写两个事件）
（一、二只要给input写事件label就会跟着相应了）
（建议使用第一种input，因为节省代码，改变文字部分时也不会很麻烦。）
（不要使用第四种，因为要写两个事件）
（一、二只要给input写事件label就会跟着相应了）
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
