如何实现点击文字也能够选中复选框

在很多实际应用中，并不要非得点击复选框才能够选中复选框，可以点击它旁边的文字也是可以的，下面就通过实例代码介绍一下如何实现此功能，代码如下:

<code>&lt;!DOCTYPE html&gt; </code>

<code>&lt;</code><code>html</code><code>&gt; </code>

<code>&lt;</code><code>head</code><code>&gt; </code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>" utf-8"</code><code>&gt; </code>

<code>&lt;</code><code>title</code><code>&gt;蚂蚁部落&lt;/</code><code>title</code><code>&gt; </code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>id</code><code>=</code><code>"a"</code> <code>&gt;&lt;</code><code>label</code> <code>for</code><code>=</code><code>"a"</code><code>&gt;蚂蚁部落一&lt;/</code><code>label</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>id</code><code>=</code><code>"b"</code> <code>&gt; &lt;</code><code>label</code> <code>for</code><code>=</code><code>"b"</code><code>&gt;蚂蚁部落二&lt;/</code><code>label</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>id</code><code>=</code><code>"c"</code> <code>&gt;&lt;</code><code>label</code> <code>for</code><code>=</code><code>"c"</code><code>&gt;蚂蚁部落三&lt;/</code><code>label</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

以这里使用label标签，只要把它的for属性值设置的和对应的复选框的id属性值相同即可实现关联效果。

原文发布时间为：2017-3-26

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落