起步 - 单选/多选控件(input type=radio type=checkbox)

  • 作者：KK

  • 发表日期：2016.5.16

单独一章节讲这个控件是因为见过太多新人把这个控件玩坏了,所以专门讲述,以便贴网址解答

上代码:

<form action="/index.php" method="post">
	告诉我你最爱的动物:
	<br/>
	<input type="radio" name="animal"/>猫
	<br/>
	<input type="radio" name="animal"/>狗
	
	<br/>
	<button type="submit">发送</button>
</form>

这样提交后PHP输出的POST数组是:

Array
(
	[animal] => on
)

显示了有一个叫color的键,没错是对应了radio控件的name="animal",可是值是on这个是怎么回事呢?你再试试喔,无论你选猫还是选狗,它都是on

其实这里还要为控件设置一个值,先把代码改成这样吧:

<form action="/index.php" method="post">
	告诉我你最爱的动物:
	<br/>
	<input type="radio" name="animal" value="cat"/>猫
	<br/>
	<input type="radio" name="animal" value="dog"/>狗
	
	<br/>
	<button type="submit">发送</button>
</form>

这里主要是在两个radio里加了value属性,猫的选项里,value的值是cat,狗的值是dog,这时候你选中猫,提交后PHP输出的color值是cat,反之就是dog了

然而如果你再刷新页面,一个都不选就提交,那PHP就会输出一个空数组,表示没有收到POST数据,可以说因为既然用户不作出选择,表示他没有任何数据能传达给PHP吧

这里加一个小插曲,注意radio的name必须相同,如果不同的话也不是不可以,但那算是另一组选项,比如这样:

<form action="/index.php" method="post">
	告诉我你最爱的动物:
	<br/>
	<input type="radio" name="animal" value="cat"/>猫
	<br/>
	<input type="radio" name="animal" value="dog"/>狗
	
	<br/>
	<input type="radio" name="member" value="tortoise"/><span style="color:red;">乌龟</span>
	
	<br/>
	<button type="submit">发送</button>
</form>

这个form表单中有3个选项:猫,狗和乌龟

在猫和狗之间,你只能选中其中一个,但是如果你再选择乌龟,则猫和狗都不会被取消选择,这样就出现了同时选择2个的现象:

简单地说就是只能选中相同name的其中一个radio

详细地说,那就是猫和狗的input name值都叫"animal",但是乌龟的name值是"member",所有animal中只能选中其中1个,所以member不算是animal的其中一员,于是选择其它animal的时候,member不受影响,不会被取消选择

可以说,猫和狗两个animal组成了一个分组,在这个分组里只选一个,而唯独乌龟的name值与其它不同,所以乌龟自己成了另一个分组

接下来看看多分组的实际应用,大家以前使用各种网站或程序肯定遇到类似过这样有多分组radio的功能:

<form action="/index.php" method="post">
	<p><input type="text" name="email" placeholder="您的邮箱" /></p>
	<p><input type="password" name="password" placeholder="您的密码"></p>
	<p>
		性别:
		<span>
			<input type="radio" name="gender" value="male"/>男
		</span>
		<span style="margin-left:30px;">
			<input type="radio" name="gender" value="female"/>女
		</span>
	</p>
	
	<p>
		是否接受优惠推送:
		<span>
			<input type="radio" name="animal" value="yes"/>是
		</span>
		<span style="margin-left:30px;">
			<input type="radio" name="animal" value="no"/>否
		</span>
	</p>
	<button type="submit">注册</button>
</form>

多分组就是这样用的,当我们有两种以上的选项都需要用户进行二选一的时候,这些选项各自分成一个个组就好了,一组是性别,一组是优惠推送设置