如何實作點選文字也能夠選中複選框

在很多實際應用中，并不要非得點選複選框才能夠選中複選框，可以點選它旁邊的文字也是可以的，下面就通過執行個體代碼介紹一下如何實作此功能，代碼如下:

<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

本文來自雲栖社群合作夥伴“螞蟻部落”，了解相關資訊可以關注螞蟻部落