[html]チェックボタンを文字を押した時にチェックされるようにする方法

htmlでチェックボタンを押した時に基本的にチェックボタンをクリックすることが一般的ですよね。しかし、チェックする項目の文字をクリックするとチェックされた方が利用者に便利じゃないですか？jsでクリックイベントを取得してチェックしたことにしないといけない？そんなことはありません。htmlだけで実装可能です。

チェックボックスの作り方

まずは、一般的なチェックボックスの作り方をご紹介します。
チェックボックスの作り方は次の通りです。

<input type="checkbox" id="checkbox1" name="check" value="on">check</input>

サンプル実装例

チェックボックスをクリックすると、チェックが入るようになりましたね。
このようにinputのtypeをcheckboxとするだけで実現することができます。
しかしこのままでは、checkという文字をクリックしてもチェックボックスがチェックされていませんね。次は、チェックボックスを文字をクリックしてもチェックされるようにしてみましょう。

文字をクリックしたらチェックされるチェックボックス

次に、文字をクリックしたらチェックボックスがチェックされるものを作りたいと思います。作り方は非常に簡単で、先ほど作ったコードのidに注目してください。id=”checkbox1″となっていますね。こちらを文字と対応させることで実現できます。実装の仕方は次のようになります。

<input type="checkbox" id="checkbox" name="check" value="on"><label for="checkbox">check here</label></input>

サンプル実装例

このようにforの名前とidの名前を一致させることで実装可能です。非常に簡単ですね。

まとめ

今回は、文字をクリックしてもチェックボックスがチェックされる方法をご紹介させていただきました。この方法の応用としましては、チェックボックスをcssで見えないようにして、クリックされた際の文字をcssを切り替えたりすることでより見栄えのいいボタンにできたります。また違う記事でその方法についてはご紹介したいと思います。