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

最近用的比较多,在这里总结一下。
要注意的是我下面的东西主要是在移动端开发测试的,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。

综合实例说事

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

关于input中type属性的切换

之前的几个项目一直纠结一个问题,就是input的type值可不可以通过什么方法直接切换。以保证密码输入框可以做到英文字符和点点之间自行切换,而不是覆盖一个文本层在上面坐事件或者别的什么方法。

好吧我还是上图吧:

input-type

input-type2

之前发现js里面有一个obj.type的属性可以直接改input里面的type值。

结果昨天测试发现不兼容ie9以下的ie浏览器。顿时泪奔。

所以现在的做法 依然是覆盖一个i额层在这个password上面来解决这个问题。

还有一个方法就是给3个跟password有关的input

<input class=”input1″ type=”text” value=”文字内容”/>

<input class=”input2″ type=”password” value=”密码内容”/>

<input class=”input3″ type=”hidden” value=”用来接收密码,提供给程序”/>

然后无非就是全部隐藏,需要显示文字的时候显示input1,input1获得焦点时隐藏掉input1,显示input2并把焦点光标给input2~剩下的逻辑你懂的。