ラボ > Javascript関連：form、DOM関連、イベント関連

ネイティブのjavascriptでformの各値の取得やセット

ネイティブのjavascriptでテキストエリアやラジオボタン、チェックボックス等の値取得

作成日:2024-03-22, 更新日:2024-03-25

取得

テキストエリア、テキストフィールド、セレクト

let selector = '#ipt';
let val = document.querySelector(selector).value;

ラジオボタン

let selector = '#ipt_radio';
let chk_val = document.querySelector(`${selector}:checked`)?.value;

チェックボックス

let selector = '#ipt_chkbox';
let aryVal = Array.from(document.querySelectorAll(`${selector}:checked`)).map(el => el.value);

値のセット

テキストエリア、テキストフィールド、セレクト

let selector = '#ipt';
document.querySelector(selector).value = 'ｘｘｘ';

ラジオボタン、チェックボックス

let selector = '#ipt_chkbox';
document.querySelector(selector).checked = true;

イベントのセット

ラジオボタン、チェックボックス

対象すべてに設定が必要

<input type="radio" name="chk_radio" value="1">
<input type="radio" name="chk_radio" value="0">
<script>
document.querySelectorAll('input[type="radio"][name="chk_radio"]').forEach(function(radio) {
    radio.addEventListener('click', function() {
        console.log('ラジオボタンがクリックされました: ' + this.value);
    });
});
</script>

<input type="checkbox" name="chk_chkbox[]" value="1">
<input type="checkbox" name="chk_chkbox[]" value="2">
<script>
document.querySelectorAll('input[type="checkbox"][name="chk_chkbox[]"]').forEach(function(checkbox) {
    checkbox.addEventListener('click', function() {
        console.log('チェックボックスがクリックされました: ' + this.value);
    });
});</script>

関連項目