58. 选择类输入：checkbox/radio

选择题有两种：可以多选的（checkbox），只能选一个的（radio）。

checkbox：复选框

用户可以选择零个、一个或多个。

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="sports"> 运动

每个复选框独立操作，互不影响。

默认选中

<input type="checkbox" name="agree" value="yes" checked> 我已阅读并同意

加了 checked 属性，页面加载时就是勾选状态。

radio：单选按钮

多个选项中只能选一个。

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="radio" name="gender" value="other"> 其他

关键：它们的 name 值相同！

浏览器通过 name 把多个 radio 归为一组。同一组里选了 A 就取消 B。

默认选中一个

<input type="radio" name="payment" value="alipay" checked> 支付宝
<input type="radio" name="payment" value="wechat"> 微信支付

value 属性很重要

用户看到的是标签文字（“男”、“女”），但提交到服务器的是 value。

<input type="radio" name="size" value="L"> 大号

用户看到”大号”，服务器收到 size=L。

没有 value，提交的就是 on 或者空值。

搭配 label 使用

单选按钮和复选框很小，直接点很费劲。

<label>
  <input type="checkbox" name="agree" value="yes">
  我同意服务条款
</label>

点击”我同意服务条款”文字也能勾选。用户体验好很多。

或者用 for + id 关联：

<input type="radio" name="lang" id="html" value="html">
<label for="html">HTML</label>

完整示例

一个”用户偏好设置”表单：

<form>
  <p>兴趣爱好（可多选）：</p>
  <label><input type="checkbox" name="hobby" value="read"> 阅读</label><br>
  <label><input type="checkbox" name="hobby" value="music"> 音乐</label><br>
  <label><input type="checkbox" name="hobby" value="sport"> 运动</label>

  <p>性别（单选）：</p>
  <label><input type="radio" name="gender" value="male"> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>

  <p>支付方式（单选）：</p>
  <label><input type="radio" name="pay" value="alipay" checked> 支付宝</label>
  <label><input type="radio" name="pay" value="wechat"> 微信支付</label>

  <p>
    <label>
      <input type="checkbox" name="agree" value="yes" required>
      我已阅读并同意服务条款
    </label>
  </p>

  <p><button type="submit">保存设置</button></p>
</form>