狼読

 
2020/04/28

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

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

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

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

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

サンプル実装例

check

チェックボックスをクリックすると、チェックが入るようになりましたね。
このように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を切り替えたりすることでより見栄えのいいボタンにできたります。また違う記事でその方法についてはご紹介したいと思います。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2020年12月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読