共计 1315 个字符，预计需要花费 4 分钟才能阅读完成。
这节课，咱们实现表单中的单选和多选性能。对于所有人而言，每天都会面临各种各样的抉择。
例如：1000W 和北大录取通知书我该选哪一个？
我是去考研还是去工作？
地上有一张 50 元和一张 100 元，我要捡哪一张？
在 HTML 中如何实现单选和多选呢? 咱们能够通过在 form 标签里，嵌入 input 标签，通过设置 input 标签的 type 属性值来实现单选和多选。
单选，type 的取值为 radio，radio 是收音机的意思，因为咱们收听节目只能调到一个波段，因而用它来示意单选按钮，就是让用户在无限的抉择中只抉择一个。
多选，type 取值为 checkbox，译为复选框，也叫多选框，让用户在无限的抉择中抉择更多的选项。
咱们来实现一个单选和多选的性能。关上编辑器，新建一个 radio_checkbox.html 文件，主动补全根底代码，在 body 标签外部编写一个 form 表单标签，在 form 标签外面增加文本 抉择性别：紧接着增加一个 input 标签，设置标签的 type 属性值为 radio，前面增加文本 “ 男 ”，回车换行。应用同样的办法，再增加一个 input 标签，设置标签的 type 属性值为 radio，前面增加文本 “ 女 ”。保留。
用浏览器关上页面，一组性别抉择的单选框显示在页面中。
应用鼠标点击单选控件，这时你会发现单选框呈现了问题，性别竟然能抉择多个? 在这里须要揭示大家的是：单选框控件必须成组应用才有意义，并且每组至多须要两个单选框。而“组”是通过 name 属性来建设的，但凡 name 值雷同的就是一组。
同组的单选框，只有一个会处在选中状态，其余的会主动出现为未选中状态。因而，如果没有给单选框设置 name 属性，默认每个单选框自成一组，一旦选中这个单选框，要想通过点击来解除选中状态就做不到了。回到编辑器，为两个 input 单选框定义 name 属性，值设置为 gender。保留。
回到浏览器，刷新。当咱们再次点击性别选框的时候，单选的成果实现了。返回编辑器，在单选框结尾处增加一个 br 标签。回车换行。输出文本：前端根底包含：在文本后输出 input 中括号 type 等于 checkbox，input[type=checkbox] 按下 tab 键，创立三个多选框控件。别离在每一个 input 复选框前面增加文本 HTML、CSS、JavaScript。保留。
回到浏览器，刷新，蕴含三个选项的复选框做好了。鼠标点击复选框，呈现了对钩，示意曾经选中，再次点击选中的复选框，勾销抉择。咱们再刷新一下页面，发现单选框和多选框在默认状况下，都没有选中。能不能在关上页面的时候，性别的男和前端根底的 HTML，默认选中呢？单选框和多选框默认选中成果，都能够通过定义 checked 属性来实现，它的值只有不为空，任何字符都能够，通常咱们会应用 checked 字符串作为它的值。另外，选中和勾销选中只有两个状态，所以也能够不必定义值，只定义一个属性名就能够了。返回编辑器，给第一个单选控件增加 checked 属性，再给第一个多选控件增加 checked 属性。保留。
回到浏览器，刷新。性别和 HTML 默认选中了。点击其余控件，单选多选的性能仍然无效。单选框和多选选框咱们就讲完了，快本人实现一下吧。
文章配套视频链接
