复选框checkbox实现单选功能的学习备份

目前还是js菜鸟，之前有实现一个复选框单选的功能，以下是我的过程。

一开始就是用正常的思路，选择器获取所有标签并添加点击事件，然后使用attr()方法改变属性值，代码如下：

html:

		<label><input type="checkbox" value=""/>语文</label>
		<label><input type="checkbox" value=""/>数学</label>
		<label><input type="checkbox" value=""/>英语</label>
		<label><input type="checkbox" value=""/>生物</label>

js:

$(function(){
    $(':input[type="checkbox"]').each(function(){
        $(this).click(function(){
            $(':input[type="checkbox"]').attr("checked",false);
            $(this).attr("checked","checked");
	});
    });
});

测试之后发现功能未实现，检查之后发现选中的标签确实只有最后一个选中的"checked"属性有值，但是页面上没有展示出来，截图如下：

后来看了一下JQuery关于attr()的介绍，attr()是对DOM元素的attribute作用的方法，而个人感觉attribute相当于DOM元素的一种“特性”，比如我们平时对一个DOM元素添加一个自定义的“属性”可以用attr()方法，例如：$("input").attr("DIY","DIY")，那上文所说的“属性”就是attribute。而操作DOM元素属性的方法为prop(),即对DOM元素的property作用的方法。果然，换成prop()方法后功能就实现了：

$(function(){
    $(':input[type="checkbox"]').each(function(){
	$(this).click(function(){
	    $(':input[type="checkbox"]').prop("checked",false);
	    $(this).prop("checked",true);
	});
    });
});

在此做个学习备份，也希望可以帮到跟我一样的js菜鸟们。