Heim  >  Artikel  >  Web-Frontend  >  HTML复选框和单选框 checkbox和radio事件介绍_基础知识

HTML复选框和单选框 checkbox和radio事件介绍_基础知识

WBOY
WBOYOriginal
2016-05-16 17:46:452206Durchsuche

checkbox 和 radio的事件选择一度让我很迷惑。

开始以我对js的理解,我觉得change事件应该是最合理的,可惜啊ie下change事件是在改变后焦点离开时才触发。
后来就用click mousedown等鼠标事件代替。发现click比mousedown要更完美一些:

radio注册了click事件以后,神奇的是用键盘上的上下左右选择时,居然会触发鼠标事件,滚轮也会触发,这种神奇的事情在mousedown下面是不会发生的。(webkit不能使用上下左右选择)
checkbox注册click事件后,奇迹再次上演,当我们用空格选中checkbox时,神奇的click事件再次触发,而mousedown再次与奇迹擦身而过。(webkit还是不能用空格选择)

让我们都用click吧,给这两位老兄减负吧,不要为了他们先天不足给他们绑定一堆事件了,对于这两个家伙click才是万能的。膜拜一下~~~

在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子:

下面给出这个例子的源代码,结合代码来讲各参数的设置:


你是否喜欢旅游?请选择:
复制代码 代码如下:

喜欢
不喜欢
无所谓


您对那些运动感兴趣,请选择:
复制代码 代码如下:

跑步
打球
登山
健美




从上面的源代码中可看出,制作单选框只要把标记的type参数设置为type="radio"就行了;而制作复选框则只要把标记的type参数设置为type="checkbox"就行了。至于实际应用中用那种选择框,要根据实际需要而定。若只需用户有一种选择的,就用单选框,如本例中“你是否喜欢旅游?”这个问题,用户只能是一种选择,所以采用了单选框;若允许用户有多项选择的内容,则采用复选框,如本例中的“你对那些运动感兴趣?”这个问题,因一个人的兴趣可能是多方面的,所以采用了复选框。

标记中设定checked参数,则该选框就被默认选中。如本例的第一个单选框(“喜欢”下面那个单选框)就设置为默认选中,这样用户若是想选择“喜欢”的话,就可以不用再选了,当然,若用户要选择了“不喜欢”,则只要点击“不喜欢”下的那单选框,而默认值被自动取消。用同样的方法也可以设置某个复选框为默认被选中。但是复选框的默认选中不可滥用,否则会引起用户的反感。

在radio里面千万要注意记得把所有的这个对象的name属性都设为相同的,比如说上例的 name="radiobutton" ,记住不是ID属性,只有这样才能实现单选的效果,不然的话上面例子的‘喜欢'、‘不喜欢'、‘无所谓'就可以同时选上了,切记!
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn