こんにちは!
今回は「Javascriptにおける、radio(ラジオボタン)の初期値について」についてお伝えしたいと思います。
要件次第で「条件によって、初期値を動的に変更したい」という場面があると思うので、何かの参考になれば嬉しいです。
Contents
【おさらい】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ボタンの初期値は動的に変更できます。
以上、お疲れさまでした〜🍵