Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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);
});
maniwac
フロントエンド・エンジニア精進中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away