4/10 js コードレシピ集 学習 checked

checkboxの変更を検知する

チェックされている状態かどうか真偽値で返す

input要素.checked

html

<label>
    <!-- input要素にchecked属性を付与すると、デフォルトでチェックされた状態になる-->
    <input type="checkbox" id="cbA" value="A" checked/>
    チェックボックスA
  </label>
  <label>
    <input type="checkbox" id="cbB" value="B"/>
    チェックボックスB
  </label>
  <label>
    <input type="checkbox" id="cbC" value="C">
    チェックボックスC
</label>

js

const cbA = document.querySelector('#cbA');

// チェックされた状態か判定
const checkedA = cbA.checked;

const cbB = document.querySelector('#cbB');
const checkedB = cbB.checked;

const chC = document.getElementById('chC');
const checkedC = cbC.checked;

alert(`checkedは${checkedA}です`); // true
alert(`checkedは${checkedB}です`); // false
alert(`checkedは${checkedC}です`); // false

// チェックの状態を切り替えるには、input要素のchecked属性に真偽値を代入する
// input要素.checked = true or false
cbB.checked = true;

// チェックボックスAの変更を検知する
// チェックボックスAに変更があった時に、アラートで変更結果を表示させる処理
cbA.addEventListener('change', (event) =>
{
  // 対象要素のchecked属性の値を取得
  const value = event.target.checked;

  // 取得した値を代入
  const logA = `チェックボックスAは${value}になりました`;

  // 変更をアラートで表示
  alert(logA);
})