▲TOPへ戻る

【javascript】input の checkbox を取得し、制御する。グループ内で一つだけにチェックを入れるには?

checkbox

チェックボックスがチェックされたか確認する

チェックされれば、true、チェックが外れたら、falseが返ってきます。
  <input type="checkbox" id="checkBx" onclick="isChecked()" />

  <script>
    const chenckBx = document.getElementById("checkBx");
    function isChecked() {
      console.log(chenckBx.checked);
    }
  </script>
チェックしてください!
console.log(chenckBx.checked); = false

グループ内で1つだけチェックされるようにする

初期状態だと、チェックしたものすべてにチェックが入ります。

グループ内の一つにだけチェックが入るようにjavascriptで制御します。

  1. 全ての<input>に同じ名前のクラスをつける。
  2. querySelectorAllで全てのクラスを取得。
  3. forEachで、全てのチェックを外す。 element.checked = false;
  4. クリックしたものにチェックを入れる。element.checked =true;
  const group = document.querySelectorAll(".group");  //➁

  function isChecked2(obj){
    if (obj.checked === true) {   //  チェックが入っていない時にチェック
      group.forEach( (element)=>{   //➂
        element.checked = false;
      })
      obj.checked = true;   //➃
    } else{   //  チェックが入っている時にチェック
      obj.checked = false;  
    }
  }

これでチェックしたものだけにチェックが入り、ほかのものはチェックが外れます。

応用

background: red;
background: green
background: blue
point

element.checked = true;
チェックが入る

element.checked = false;
チェックが外れる

forEachで全てのチェックを外してから、チェックしたものにチェックを入れる。

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<