チェックボックスを出力して送信
<form action="/dest.html" method="GET">
<div class="form-wrapper">
<label for="check">checkbox</label>
<input type="checkbox" id="check" name="check">
</div>
<button>submit</button>
</form>チェックボックスにチェックが入っている場合、name 属性の値 check で on の値が送信されます。チェックが入っていない場合や name 属性がない場合は、何も送信されません。
チェックは cheked 属性を指定してつけることが出来ます。
<form action="/dest.html" method="GET">
<div class="form-wrapper">
<label for="check">checkbox</label>
<input type="checkbox" id="check" name="check" checked>
</div>
<button>submit</button>
</form>on の値を変更したい場合は、value 属性を使います。
<form action="/dest.html" method="GET">
<div class="form-wrapper">
<label for="check">checkbox</label>
<input type="checkbox" id="check" name="check" value="checked">
</div>
<button>submit</button>
</form>value 属性を指定すると、初期値の on の代わりに value 属性の値の checked が送信されます。
送信前に値を取得する
input change イベントで値を取得する
<script>
document.getElementById('check').addEventListener('change', function() {
console.log(this.value); //checked
})
</script>value で value の値を取得します。
チェックが入っていなくても checked を取得します。
チェックが入っているか
<script>
document.getElementById('check').addEventListener('input', function() {
console.log(this.checked);
})
</script>checked でチェックされているか確認できます。
チェックが入っている場合 true 、入っていない場合 false を取得します。
チェックされている場合 value の値を取得
<script>
document.getElementById('check').addEventListener('input', function() {
if (this.checked) {
console.log(this.value);
}
})
</script>以上チェックボックスで送信される値と取得・チェックされてるか確認方法でした。
