click - HTML label for 使い方 - クリックできるラベル付きのチェックボックスを作成するには?

label for id以外 / html / checkbox / label

クリック可能なラベルを持つHTMLチェックボックスを作成するにはどうしたらよいでしょうか(つまり、ラベルをクリックするとチェックボックスのオン/オフが切り替わる)。

Alexander Abakumov



Answer #1

また、CSSの疑似要素を使って、すべてのチェックボックスのvalue属性からラベルを選んで表示することもできます(それぞれ)。
編集:これは、webkit および点滅ベースのブラウザー (Chrome(ium)、Safari、Opera など)、つまりほとんどのモバイル ブラウザーでのみ機能します。ここではFirefoxまたは IE のサポートはありません。
これは、アプリケーションにwebkit/blinkを埋め込む場合にのみ有効です。

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>