终于在CSDN安家了。
昨天在做项目的时候突然遇到一个要用radiobutton的地方,最最简单的选中单选框并且实现单选。这样的问题我已经觉得很生疏了。恩,要努力努力呀。
首先,先给出一段简单的代码:
<
input
id
="radio1"
type
="radio"
/>
< input id ="radio2" type ="radio" />
< input id ="radio3" type ="radio" />
< input id ="radio2" type ="radio" />
< input id ="radio3" type ="radio" />
这段代码的效果应该是如下图所示:
这时候用鼠标点击任何一个radiobutton都不会选中。要选中RadioButton 并且实现单选,解决方法如下:
<
input
id
="radio1"
type
="radio"
name
="1"
/>
< input id ="radio2" type ="radio" name ="1" />
< input id ="radio3" type ="radio" name ="1" />
< input id ="radio2" type ="radio" name ="1" />
< input id ="radio3" type ="radio" name ="1" />
这时候我们可以看到效果图:
其实关键就在于这个name的属性。相同的name为一个单选Group。例如下面一段代码:
<
input
id
="radio1"
type
="radio"
name
="1"
/>
< input id ="radio2" type ="radio" name ="1" />
< input id ="radio3" type ="radio" name ="1" />
< br />
< br />
< input id ="radio1" type ="radio" name ="2" />
< input id ="radio2" type ="radio" name ="2" />
< input id ="radio3" type ="radio" name ="2" />
< input id ="radio2" type ="radio" name ="1" />
< input id ="radio3" type ="radio" name ="1" />
< br />
< br />
< input id ="radio1" type ="radio" name ="2" />
< input id ="radio2" type ="radio" name ="2" />
< input id ="radio3" type ="radio" name ="2" />
效果如下:
这时候上面的一行radio是一个group,下面是另一个Group,可以各自实现单选。
第一篇文章结束了,知之为知之,不知为不知。