dom_dom0600_009

チェックボックスの送信値は未チェック時は送られない。未チェックでも固定値を送りたい場合は、隠しフィールドと組み合わせるか、JSで ( A ) を作って送る。JSで動的送信する場合、fetch のボディには new ( B )(form) を渡す方法が簡単である。

解答

A: 値の補完(手動で値を追加する処理)
B: FormData

解説

未チェックのチェックボックスはフォーム送信に含まれません。必要なら隠し入力や FormData.append で補完します。fetch に FormData をそのまま渡すと multipart/form-data で送れます。

使用例(サンプルコード)

[ html ]

<form id="pref">
  <input type="checkbox" name="newsletter" value="1">
</form>
<script>
  const form = document.getElementById('pref');
  const fd = new FormData(form);
  if (!fd.has('newsletter')) fd.append('newsletter', '0'); // 補完
  fetch('/save', { method: 'POST', body: fd });
</script>