JavaScriptでチェックボックスやラジオボタンの値を取得する方法
JavaScriptでフォームのチェックボックスやラジオボタンの選択値を取得する方法です。
下記サンプルでは、ボタンが押された場合に値を判定しています。
フォームのサンプル
<main class="ps-4 pe-2">
<p class="h4 mb-3">チェックボックス</p>
<form class="row mb-3">
<div class="col">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="checkbox1" value="1">
<label class="form-check-label" for="checkbox1">Checkbox one</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="checkbox2" value="2">
<label class="form-check-label" for="checkbox2">Checkbox two</label>
</div>
<button type="button" class="btn btn-primary" onclick="onCheckbox();">実行</button>
</div>
</form>
<p class="h4 mb-3">ラジオボタン</p>
<form class="row mb-3" id="radioBox">
<div class="col">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radiobox" id="radio1" value="1">
<label class="form-check-label" for="radio1">Radio one</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radiobox" id="radio2" value="2">
<label class="form-check-label" for="radio2">Radio two</label>
</div>
<button type="button" class="btn btn-primary" onclick="onRadio();">実行</button>
</div>
</form>
</main>
※各CSSのクラスにはBootstrapを使用しています。
選択されているチェックボックスの値を取得する
エレメントのID属性からチェックボックスの値を取得します。valueは非選択でも取得できるため、まずチェック状態を確認してから、チェックされているエレメントの値を取得します。
function onCheckbox() {
const checkbox1 = document.getElementById('checkbox1');
if (checkbox1.checked) {
console.log(checkbox1.value);
}
const checkbox2 = document.getElementById('checkbox2');
if (checkbox2.checked) {
console.log(checkbox2.value);
}
}
ラジオボタンの選択値を取得する方法
ラジオボタンの選択値はエレメントのname属性から取得する方法と、フォームのradioNodeListから取得する方法があります。
name属性から選択されているラジオボタンの値を取得する
この場合はチェックボックスと同じく、valueが非選択でも取得できるため、まずチェック状態を確認してから、チェックされているエレメントの値を取得します。
function onRadio() {
const elements = document.getElementsByName('radiobox');
for (let i = 0; i < elements.length; i++) {
if (elements[i].checked) {
console.log(elements[i].value);
}
}
}
フォームのradioNodeListから取得する
１つも選択がない時の値は空文字になります。
function onRadio() {
const form = document.getElementById('radioBox');
const radioNodeList = form.radiobox;
if (radioNodeList.value !== '') {
console.log(radioNodeList.value);
}
}
