首页 > 其他 > 详细

表单元素之选择系

时间:2016-01-11 20:14:08      阅读:268      评论:0      收藏:0      [点我收藏+]

选择系特指input[type=radio]与input[type=checkbox], 俗话的单选框与复选框。它们都是 通过checked属性决定是否能提交到后端,在传统框架中,都是将它们序列化成字符串进行提交,但新的MVVM框架, 它们对应的是更语义化的东西。单选框为一个布尔,那么只要将它的name值及选中或选中的布尔(通常为节省字符简化为0或1)提交就行。在复选框 对应一个字符串数组,将数组序列化进行提交。

从上面的描述来看,关键在于checked属性的监听。通常来说,属性变动用change事件就行了,但IE又给我们带来麻烦。

表现在以下两个方面 如果有一个radio,我们点击它让它选中,然后再点它让它不选中.事实上,只有一个radio的情况下,一旦选中,光是通过点击事件,它是变不回非选中状态.我们需要手动el.checked = true|false实现.更直观的代码是el.checked = !el.checked. 这个是许多浏览器下生效,但IE6下偏偏不行,查资料,发现是通过defaultChecked属性进行设置,并且这个触发行为需要异步进行.
            if (IE6) {
                setTimeout(function () {
                    //IE8 checkbox, radio是使用defaultChecked控制选中状态,
                    //并且要先设置defaultChecked后设置checked
                    //并且必须设置延迟
                    elem.defaultChecked = checked
                    elem.checked = checked
                }, 31)
            } else {
                elem.checked = checked
            }

第二个checkbox的监听, IE复选框onchange必须点击了其他地方才触发, 因此网上流行使用onclick或onpropertychange事件代替. 但onpropertychange事件是监听所有属性的变动,因此有误判,建议使用onclick. 这个BUG在IE9就修好了.

此外还有一些简单的文章供大家学习

RadioButton和CheckBox的区别

HTML复选框和单选框 checkbox和radio事件介绍

美化表单——自定义checkbox和radio样式

表单元素之选择系

原文:http://www.cnblogs.com/rubylouvre/p/5122081.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!