关于JQ中的获取和修改属性接口（attr和prop）

情况：选中全选的checkbox按钮后，其他所有的checkbox按钮，都要选中，反之一样。

实际：通过JQ获取checkbox的checked属性，并反复修改。

前端代码：（通过attr接口方式修改）

$(function(){
	$("#checkbox_all").click(function(e){
		var checked = $(this).is(":checked");
		changeCheckboxStatus(checked);
	});
});

$("input[name^='checkbox_']").each(function(){
	$(this).attr("checked", value);//在谷歌上，反复调用时，显示会失效，但属性有被修改掉，目前尝试，第三次交替就会出现状况
});

页面效果：

图一（未点击时）

 

图二（点击后）

再次点击时，即取消，效果如图一，没有属性

但是第三次点击，即选中时，就有显示问题（注意：该显示问题，在IE8可以，在谷歌反而不行）

图三

 

这里可以看到，该checkbox的属性已经被修改成checked，但是显示却有误(谷歌上，IE8没问题）

 

现在换一种方式实现：JQ的prop接口

前端代码：

$(function(){
	$("#checkbox_all").click(function(e){
		var checked = $(this).is(":checked");
		changeCheckboxStatus(checked);
	});
});

$("input[name^='checkbox_']").each(function(){
	$(this).prop("checked", value);
});

页面显示：（IE8和谷歌都没有问题，但在谷歌的开发者工具中，无法观察到元素的属性变化，即checkbox是否被选中，都无法观察到checked属性的变化）

图四

 

 

文章参考：

前端开发学习之——使用jquery/javascript判断及改变checkbox选中状态

JQ文档：

JQ文档