问题说明

在前端界面中涉及到多个勾选框级联的时候，一开始采用 Jquery 常见的.attr()方法。

实际开发自测过程中发现有时候无法生效，或需要多次触发才会生效。

而在 Jquery1.8 官方文档中的举同样例子的时候使用的是.prop()方法。

方法介绍

prop()方法

prop()方法：设置或返回被选元素的属性和值。

• 当该方法用于返回属性值，则返回第一个匹配元素的值
• 当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对
• 方法操作 radio（checkbox）之类的控件，让其选中的时候，其控件选中的值也会随之改变，即既可以控制其选中，也能控制其取消选中

attr()方法

attr()方法：设置或返回被选元素的属性和值。

• 当该方法用于返回属性值时，则返回第一个匹配元素的值
• 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对
• 方法操作 adio（checkbox）之类的控件，让其选中的时候，其控件选中的值不会随之改变，即只能控制其选中，不能控制其取消选中

原因分析

从官方文档的描述来看，attr()应当也能够正常触发选择框的选中，实际应用发现有可能无效。

1. 添加属性名称该属性就会生效应该使用 prop()
2. 特别是 true,false 两个属性使用 prop()（如 checked、selected、disabled 等）
3. 其他则使用 attr()如自定义的一些属性（如 data-val 等）

替换案例

//勾选
//旧写法
$("#ID").attr("checked","checked");
//新写法
$("#ID").prop("checked","true");

//去勾选
//旧写法
$("#ID").attr("checked",false);
//新写法
$("#ID").removeAttr("checked");

//获取checkbox的选中状态
//旧写法
//返回结果始终是undefined 
$(".check").attr("checked")
//新写法
//这两个语法的任意一个均获取到是否选中的结果true/false 
$(".check").prop("checked")
$(".check").is(":checked")
​