HTML - 单选多选 ¶

多选
单选

作者：KK
发表日期：2016.1.26

多选 ¶

演示 ¶
有时候网页上要显示一些选项给用户钩选,我们需要通过input标签的type="checkbox"属性来实现:
```
<p>请问你要点哪个菜?:</p>
<div>
	<input type="checkbox"/>烧鸡&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="checkbox"/>烧鸭&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="checkbox"/>青菜
</div>
```
这个<input type="checkbox"/>只是一个钩选项,不带文字的,所以对于这个钩钩有什么说明,要自己另外附加文字哦

默认钩选 ¶

我们可以让一些东西默认就钩选,比如

<input type="checkbox"/>非默认选项<br/>
<input type="checkbox" checked="checked"/>默认选项<br/>
<input type="checkbox" checked/>有属性没有值也可以<br/>

这叫多选按钮,因为我们可以同时钩选多个嘛

单选 ¶

演示 ¶

和多选差不多,主要是通过type="radio"这个radio属性值实现

<p>亲,你只能选下面其中一个武器哦:</p>
<div>
	<input type="radio" name="wuqi"/>刀&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="wuqi"/>枪&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="wuqi"/>剑&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="wuqi"/>戟
</div>

通常我们叫它radio选项或单选项,这时候你选了另一个武器时,原来选中的武器就不会被选中了,但是你如果将全部name属性删除,就会失去这个效果,name属性可以起到分组的作用

多分组 ¶

为了证明name属性在radio选项中有多重用,再来看这个例子:

<p>亲,你只能选下面其中一个武器哦:</p>
<div>
	<input type="radio" name="wuqi1"/>刀&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="wuqi1"/>枪&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="wuqi2"/>剑&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="wuqi2"/>戟
</div>

此时如果你选中了刀,再选枪,没错,刀会不被选中,可是再选择剑,枪还是被选中了,这就同是选中了两个武器啦,不符合游戏规则呀!怎么禁止玩家选择2个以上的武器呢?

聪明的你一定知道,就是因为name的问题,刀和枪的name值是wuqi1,而剑和戟的name值是wuqi2,你从刀选择为枪的时候,浏览器知道枪的name是wuqi1,然后它到处搜索哪里还有name="wuqi1"的标签,有的话把它关掉选择,所以刀被取消了选择,可是wuqi2的的标签组不会被浏览器搜索到

所以多分组应该是这么用才正确的:

<p>请选择你要前往的国家</p>
<div>
	<input type="radio" name="target"/>中国&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="target"/>美国&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="target"/>英国&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="target"/>德国
</div>
<br/>
<br/>
<p>请选择你要起飞的时间:</p>
<div>
	<input type="radio" name="time"/>9-10点&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="time"/>11-13点&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="time"/>14-15点&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" name="time"/>16-18点
</div>