ラジオボタンを出力して送信
<form action="/dest.html" method="GET">
<div class="form-wrapper">
<label for="radio1">radio1</label>
<input type="radio" id="radio1" name="radio" value="1" checked>
<label for="radio2">radio2</label>
<input type="radio" id="radio2" name="radio" value="2">
<label for="radio3">radio3</label>
<input type="radio" id="radio3" name="radio" value="3">
</div>
<button>submit</button>
</form>
ラジオボタンは同じ name 属性のグループの中から一つの値を送信します。
チェックされて checked 属性がある要素の name の値 radio の名前で、value の値が送信されます。
送信前に値を取得する
input、 change イベントは、チェックボタンが押されたときに発生します。
<script>
document.getElementsByName('radio').forEach(function(radio) {
radio.addEventListener('change', function() {
if (this.checked) {
console.log(this.value);
}
})
})
</script>
change イベント発生時に選択した value を取得します。
4: checked でチェックされているか確認できます。
チェックが入っている場合 true 、入っていない場合 false を取得します。
value で value を取得することが出来ます。
以上ラジオボタンで送信される値と取得・チェックされてるか確認方法でした。