javascript チェックボックスをチェックする

作成日 2022.12.17
javascript
javascript

javascriptで、チェックボックスをチェックするサンプルコードを記述してます。「checked属性」を「true」に指定すればチェックが入ります。ここではチェックボックスをチェック状態を切り替える方法も記述してます。

1. 環境
2. チェックボックスをチェック
3. チェックボックスのチェックを切り替える
4. 複数のチェックボックスのチェックを切り替える
5. 「form」内で「button」クリック
6. コードの簡潔化
7. チェック時に発生するイベント
8. サンプルコード

環境

OS windows11 pro 64bit
ブラウザ chrome 108.0.5359.99

Javascript サンプル集はこちら

チェックボックスをチェック

チェックボックスをチェックするには、対象のチェックボックスの「checked属性」を「true」にするだけです。

チェックボックス要素.checked = true;

実際に、ボタンをクリックしてチェックボックスにチェックをしてみます。

<form id="frm">
  <input type="checkbox" id="chk" />  
</form>

<button id="btn">button</button>

<script>

// チェックボックスをidで取得
const elm = document.getElementById('chk');

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(){
    // チェックボックスにチェックを入れる
    elm.checked = true;
  }
)

</script>

実行結果をみると、チェックボックスにチェックがついていることが確認できます。

ここではボタンのクリックイベントに「addEventListener」を使用してますが「onclick」を使用することもできます。違いは、以下のページをご参照ください。

addEventListenerとonの違い

チェックボックスのチェックを切り替える

チェックの状態を切り替えるには、
1.　チェックボックスの状態を取得して条件式を作成
2.　チェックがついていれば「checked」を「false」に、ついてなければ「true」
で可能です。
※ちなみに、チェックボックスにチェックがついた状態にするには「checked」属性を指定します。

<input type="checkbox" id="chk" checked/>

実際に、実行して切り替えてみます。

<form id="frm">
  <input type="checkbox" id="chk" checked/>
</form>

<button id="btn">button</button>

<script>

// チェックボックスをidで取得
const elm = document.getElementById('chk');

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(){
    // チェックボックスにチェックが入っていれば外す
    if(elm.checked === true){
      elm.checked = false;
    }else{
      elm.checked = true; // 入ってなければチェックを入れる
    };
  }
)

</script>

実行結果をみると、切り替わっていることが確認できます。

複数のチェックボックスのチェックを切り替える

チェックボックスを複数同時に処理したい場合は「querySelectorAll」などで全ての要素を取得してループさせて処理します。

<form id="frm">
  <input type="checkbox" value="one">
  <input type="checkbox" value="two">
  <input type="checkbox" value="three">
</form>

<button id="btn">button</button>

<script>

// チェックボックスをquerySelectorAllで全て取得
const elm = document.querySelectorAll("input[type='checkbox']");

// 取得した要素はループ可能なNodeList
console.log(elm); // NodeList(3) [input, input, input]

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(){
    // forEachで各チェックボックスを処理
    elm.forEach(function(v){
      if(v.checked === true){
      v.checked = false;
      }else{
        v.checked = true; // 入ってなければチェックを入れる
      };
    })

  }
)

</script>

実行結果をみると、全てチェックボックスが処理されていることが確認できます。

「form」内で「button」クリック

ちなみに「form」内に「button」要素を入れてクリックすると「submit」されてページがリロードされます。
※「button」は、「デフォルト」で「type=’submit’」となっているためです。

<form id="frm">
  <input type="checkbox" id="chk" />
　<!-- form内にbuttonを設置 -->
  <button id="btn">button</button>
</form>

<script>

// チェックボックスをidで取得
const elm = document.getElementById('chk');

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(){
    // チェックボックスにチェックが入っていれば外す
    if(elm.checked === true){
      elm.checked = false;
    }else{
      elm.checked = true; // 入ってなければチェックを入れる
    };
  }
)

</script>

実行結果をみるとリロードされていることがわかります。

リロードされないようにするには、formのデフォルトの動作をキャンセルするメソッド「preventDefault();」を使用します。

<form id="frm">
  <input type="checkbox" id="chk" />
  <button id="btn">button</button>
</form>

<script>

// チェックボックスをidで取得
const elm = document.getElementById('chk');

// ボタンのクリックイベント
document.getElementById('btn').addEventListener('click',
  function(event){
    // チェックボックスにチェックが入っていれば外す
    if(elm.checked === true){
      elm.checked = false;
    }else{
      elm.checked = true; // 入ってなければチェックを入れる
    };

    event.preventDefault();
  }
)

</script>

もしくは「button」に「type=’button’」と指定します。

<button id="btn" type="button">button</button>

コードの簡潔化

また、javascript部はeventを省略してdocument.getElementByIdを「id名」のみで記述し、アロー関数や三項演算子を使用すると上記のコードは簡潔に記述することもできます。

アロー関数の使い方

document.getElementByIdの省略して記述する

三項演算子を使ってif文を1行で書く

<script>

// ボタンのクリックイベント
btn.addEventListener('click',
  () => {
    (chk.checked === true) ? chk.checked = false : chk.checked = true;
    event.preventDefault();
  }
)

</script>

チェック時に発生するイベント

チェックボックスにチェックしたり外したりすると「change」が発生します。イベントは以下のように取得することができます。

<form id="frm">
  <input type="checkbox" id="chk" />  
</form>

<script>

// ボタンのクリックイベント
chk.addEventListener('change',
  () => {
    console.log('イベントが発生しました');
  }
)

</script>

サンプルコード

以下は、
「実行」ボタンをクリックすると、チェックボックスに指定してある「value」が「option2」のもののみにチェックする
サンプルコードとなります。

※cssには「tailwindcss」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <form id="frm" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div class="flex flex-wrap -mx-3 mb-2">
          <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" value="option1" />
              <label class="form-check-label" for="inlineCheckbox1">1</label>
            </div>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" value="option2" />
              <label class="form-check-label" for="inlineCheckbox2">2</label>
            </div>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" value="option3" />
              <label class="form-check-label" for="inlineCheckbox3">3</label>
            </div>
          </div>
        </div>
      </form>      

      <button id="btn"
        class="mb-2 md:mb-0 bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded">
        実行
      </button>

    </div>

  </div>

  <script>

    // 全てのチェックボックスを取得
    const elm = document.querySelectorAll("input[type='checkbox']");

    // ボタンのクリックイベント
    document.getElementById('btn').addEventListener('click',
      function () {
        // forEachで各チェックボックスを処理
        elm.forEach(function (v) {
          // valueがoption2だけのものをチェックする
          if (v.value === "option2") {
            v.checked = true;
          };
        })

      }
    )

  </script>
</body>

</html>

チェックされていることが確認できます。