【Javascript】radio(ラジオボタン)の初期値について

こんにちは！

今回は「Javascriptにおける、radio(ラジオボタン)の初期値について」についてお伝えしたいと思います。

要件次第で「条件によって、初期値を動的に変更したい」という場面があると思うので、何かの参考になれば嬉しいです。

【おさらい】radio(ラジオ)ボタンの基本形

ご存知の方も多いと思いますが、Javascriptを使って、radio(ラジオ)ボタンの値を取得する方法です。

<!-- ラジオボタンサンプル -->
<label><input name="foods" type="radio" value="ramen" />ラーメン</label>
<label><input name="foods" type="radio" value="udon" />うどん</label>
<label><input name="foods" type="radio" value="pizza" />ピザ</label>

<input type="button" value="radioボタンの値を確認" />

// 値を取得
const elements = document.getElementsByName('foods');
const len = elements.length;

const buttonClick = () => {
  for (let i = 0; i < len; i++){
    if (elements.item(i).checked){
      console.log(elements.item(i).value) //出力: （空白）
    }
  }  
};

radioボタンの初期値を設定したいとき

初期値が決まっている場合はhtmlにcheckedを指定すれば良い

例えば、こんな感じです。

<!-- ラジオボタンサンプル -->
<label><input name="foods" type="radio" value="ramen" />ラーメン</label>
<label><input name="foods" type="radio" value="udon" />うどん</label>
<label><input checked="checked" name="foods" type="radio" value="pizza" />ピザ</label>

<input type="button" value="radioボタンの値を確認" />

// 値を取得
const elements = document.getElementsByName('foods');
const len = elements.length;

const buttonClick = () => {
  for (let i = 0; i < len; i++){
    if (elements.item(i).checked){
      console.log(elements.item(i).value) //出力: pizza
    }
  }  
};

このようにピザのinput タグにchecked をつければ、画面を表示した際、初期値でピザが選択されます。

初期値を動的に指定したいならJavascriptで制御する

例えば、「DBから値を取得して、その値によって初期値を動的にしたい」などです。

<!-- ラジオボタンサンプル -->
<label><input name="foods" type="radio" value="ramen" />ラーメン</label>
<label><input name="foods" type="radio" value="udon" />うどん</label>
<label><input name="foods" type="radio" value="pizza" />ピザ</label>

<input type="button" value="radioボタンの値を確認" />

// 初期値を動的に変更する
const elements = document.getElementsByName('foods');
const len = elements.length;

/**
 * 画面読み込み時に実行される処理
 */
(() => {
  // 例：DBから値を取得した値をフロントに渡す
  const valueFromDb = 'udon';
  
  for (let i = 0; i < len; i++){
    if (elements.item(i).value == 'udon'){
      elements.item(i).checked = true;
    }
  }
})();

画面読み込み時、うどんが初期値で選択されました。

このようにJavascriptを使えば、radioボタンの初期値は動的に変更できます。

以上、お疲れさまでした〜🍵