关于input的radio和checkBox组件的一些用法总结

Home » CSS » JavaScript » web开发 » 关于input的radio和checkBox组件的一些用法总结

Archives

文件夹

最近用的比较多,在这里总结一下。
要注意的是我下面的东西主要是在移动端开发测试的,chrome也测试了,pc端其他浏览器我会在之后补上说明的。
我这里说的click是已经优化过的点击,自己在合适的时候切换成touch。
另外,无视jquery2+。

大家都知道的

在input外面加上label,或者通过label中的for属性指向input,可以通过点击label区域触发input的change或者focus。
针对radio和checkBox主要就是change事件。
那么触发input:radio和input:checkBox会有什么操作呢?
radio:如果已选中,不会有变化。如果未选中,那么在同一个name里面,选中该radio,原来选中的radio取消选中。
checkBox: 如果已选中,取消选中;如果未选中,改变为选中状态。

你可能不知道的

前提:
这里以jquery的语法描述。
不在html中直接操作checked属性,因为要做遍历。

先说radio:
我们要通过label间接改变一个radio组的状态可以用click事件,也可以用change事件
以$(this).find(“input:radio”).is(‘:checked’)来判断当前的子元素是不是选中状态。
以$(this).find(“input:radio”).get(0).checked = false;来取消选中状态(如果你默认一个都不选中有可能会用到这个)。
click与change的区别就是,不管你该元素的状态是否变化,click都会触发。
而change只有在你元素选中与否变化时才会触发。所以我认为change是优选。
而你想通过其他方式修改这组单选状态的时候,可以通过$(this).find(“input:radio”).eq(index).trigger(“click”)来实现,不能用change。

以上的操作在pc端是没问题的,但是在移动端,想用change操作input的属性是不可以的。
那checkBox呢:
从上面对radio和radio其实没有不同。
但在做特别样式的展示,并且要把丑陋的input隐藏时,要注意保持展示和看不到的input状态是一致的。
我开始用click测试的时候就发现展示状态改变正常,但是input可能没有变化~

总结一些用法

如何确定该选择项目是否被选中:
有人说我要用$(this).attr(“checked”)来查看当前状态,那在我上面说的这个方发现,这么判断永远是空…
用$(this).is(‘:checked’)可以达到判断是否选中。当然你愿意用class标记是否选中也可以。
change和click:
pc端用change提高效率,移动端用click。

综合实例说事

点击查看实例 >>
或者扫码。

发表评论