把复选框变成单选框(prop,attr的区别)

如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求.

下面是用jquery的简单实现

$(function(){
    $("input[type='checkbox']").click(function() {
        var flag = $(this).prop("checked"); //先记录下点击后应该的状态
        $("input[type='checkbox']").prop("checked", false);
        $(this).prop("checked", flag);
    });
});

这里有两个技巧:

1.每次点击事件中都把所有复选框都设置为false,这样可以保证单选.

2.在复选框置为false之前,记录下当前复选框点击后应该处于的状态,在复选框置为false之后,恢复该状态.这样可以保证复选框点击的正确.

这里有个jQuery的问题,在涉及到获取标签的属性是false或者true时,如checkbox的checked属性,如果jquery版本是1.6以上,就用prop,这样取得的属性值一定是true或false,如果用attr可能false会变成undefined,其他情况就还是用attr.