htmlでinput type=”checkbox”がチェックされたらの情報の取得のまとめ

HTMLフォームを作成する際、チェックボックスの実装で悩んでいませんか？

「チェックボックスの基本的な使い方は分かるけど、スタイリングやJavaScriptでの操作方法どうだったっけ？」そんな悩みを抱えている方も多いのではないでしょうか。

この記事はこんな人にオススメ

• inputがよくわからない人
• checkedをJS取得したい人
• input type=”checkbox”の扱いを網羅したい方

基本チェックボックスHTML

チェックボックスは、ユーザーが複数の選択肢から一つまたは複数の項目を選べるようにする入力要素です。

覚え方としてはチェックを1つしかできないのがラジオボタンで

複数チェックできるものがチェックボックスです。

チェックボックスを作る手順

下記のチェックボックスの基本となるHTMLコードの各部分を詳しく見ていきましょう

<input type="checkbox" name="example" value="1">
<input　type="checkbox" name="example" value="2">

これでチェックボックスの完成です！簡単ですね！

ポイントはtypeをcheckboxにするということです！

チェックボックスのスタイリング

チェックボックスのデフォルトの外観はシンプルですが、CSSを使用してカスタマイズすることができます。

チェックされたcheckboxのスタイリング

チェックの有無によってスタイリングをしたい場合の指定方法は下記です

input:checked + .span {
  background-color: rgb(182, 185, 24);
  transition: 0.5s;
}

上記のCSSコードは、チェックボックスがチェックされた時に隣接する.span要素の背景色を変更し、0.5秒のトランジション効果を適用します。

チェックボックスはチェックされたものにcheckedというプロパティがつくという特性があります！

そのcheckedを指定してスタイリングをしてやるのがポイントです！

JavaScriptでのチェックボックス操作

チェックボックスの取得方法

let usedCheckBox = document.querySelectorALL('input[type="checkbox"][name="example"]');

上記のコードでname=”example” というname属性を持つチェックボックスの要素を全て取得できます！

チェックされたチェックボックスの取得方法

let checked = document.querySelectorAll('input[name="example"]:checked');

こちらはname=”example”のname属性を持ち、かつチェックされている入力要素を取得します。

チェックボックスがチェックされたら〜の操作方法

// すべてのチェックボックスを取得
let usedCheckBoxes = document.querySelectorAll('input[type="checkbox"][name="example"]');

// 各チェックボックスに対して操作を行う
usedCheckBoxes.forEach(usedCheckBox => {
    // チェックボックスの状態を確認
    if (usedCheckBox.checked) {
        console.log('チェックボックスがチェックされています');
    }
});

チェックボックスを取得し.checkedとすることでcheckされた要素に対して操作することが出来ます！

まとめ

HTMLのチェックボックスは、最初の方は少しややこしく感じるかもしれませんが、一つ一つ紐解いていけば理解しやすくなります！

特にCSS屋JavaScriptでの操作を私は忘れやすいので備忘録的に残してみました！

以上太郎でした！