表单元素之选择系

选择系特指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样式