再谈 radio & checkbox

[teazean]

radio & checkbox 在 form 都是可以出现多次相同 name 的输入控件，他们的差异在于：

• radio：多个相同 name 的情况下（单选组），radio 只能选择一个，当选择其中一个时，其他的会取消选择，但是真正触发 change 只有有交互的那个，其他的不触发 change 事件。
• checkbox: 多个相同 name 的情况下（多选组），每一个 checkbox 都可以独立选择，独立触发 change 事件。

radio 的应用场景其实只有 radio group，只有多个选择情况下才有意义，有一个缺点，但你选中一个 radio 的时候，是没法清空选择的。

对 <input type="radio"> 和 <input type="checkbox"> 不设置 value 的情况下，取得的 input.value 均是默认值 on

[teazean]

对于 checkbox 组而言，数据通过 form 表单提交时，会产生多条相同 key 不同 value 的情况，链接，比如：

<div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>

提交的时候是：interest=coding&interest=music

而在 php 中，需要提交的 key 是 xxx[] 这种结构让服务端识别是数据。。（☹️)

[teazean]

这篇文章讲述了为啥会叫 Radio Buttons: https://raamdev.com/2008/html-radio-buttons-a-blast-from-the-past/

设计就是让用户从一堆设计好的选项中选择一个。（来源于收音机）