把复选框变成单选框(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.