所属分类 WEB

问题说明

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

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

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

方法介绍

prop()方法

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

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

attr()方法

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

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

原因分析

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

添加属性名称该属性就会生效应该使用prop()
特别是true,false两个属性使用prop()（如checked、selected、disabled等）
其他则使用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")