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を使用しています。

JavaScriptでチェックボックスやラジオボタンの値を取得

選択されているチェックボックスの値を取得する

エレメントの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から取得する

1つも選択がない時の値は空文字になります。

function onRadio() {
    const form = document.getElementById('radioBox');
    const radioNodeList  = form.radiobox;
    if (radioNodeList.value !== '') {
        console.log(radioNodeList.value);
    }
}
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です