チェックボックス、ドロップダウンの操作方法

Javascriptでチェックボックス、ドロップダウンの基本的な扱い方。
（個人的にjQueryを使う事が多かったので、Vanillaでも使えるようとメモします。）

チェックボックス

チェックボックスの情報の取得・変更

取得する場合は<input type="checkbox" />に対してcheckedプロパティーを使います。
checkedプロパティーは真偽値（Boolean型）で返します。

<label><input type="checkbox" id="checkboxA" value="Blue"></label>
<label><input type="checkbox" id="checkboxB" value="Yellow" checked></label>

const cb_A      = document.querySelector('#checkboxA');
const checked_A = cb_A.checked;

const cb_B      = document.querySelector('#checkboxB');
const checked_B = cb_B.checked;

console.log('checked_Aの値：', checked_A); // 結果 false
console.log('checked_Bの値：', checked_B); // 結果 true

変更する場合はcheckedプロパティーに真偽値を代入します。

const cb_A = document.querySelector('#checkboxA');
cb_A.checked = true;  // チェックされた状態になる

チェックボックスの変更を検知

値の変更を検知するにはchangeイベントで監視します。

<label><input type="checkbox" id="checkboxA">Check</label>

const tgtCheckbox = document.getElementById('checkboxA');
tgtCheckbox.addEventListener('change', function(event) {
  const value = event.target.checked;
  console.log(value);
});

ドロップダウンメニューの情報の取得・変更

取得する場合は、対象となるselect要素を参照し、value値を調べます。

<select id="dropdown-menu">
  <option value="eagle">イーグル</option>
  <option value="shark">シャーク</option>
  <option value="panther" selected>パンサー</option>
</select>

/**
 * select要素の参照
 */
const tgtDropdownMenu = document.querySelector('#dropdown-menu');

/**
 * 値を取得
 */
const value = tgtDropdownMenu.value;

console.log(value);  // 結果 panther

変更する場合はoptionで定義されている値を代入します。

const tgtDropdownMenu = document.querySelector('#dropdown-menu');
tgtDropdownMenu.value = 'eagle';

ドロップダウンメニューの変更を検知

値の変更を検知するにはchangeイベントで監視します。

<select id="dropdown-menu">
  <option value="eagle">イーグル</option>
  <option value="shark">シャーク</option>
  <option value="panther" selected>パンサー</option>
</select>

const tgtDropdownMenu = document.querySelector('#dropdown-menu');
tgtDropdownMenu.addEventListener('change', function(event) {
  const value = tgtDropdownMenu.value;
  console.log(value);
});