jquery prop 和 attr 区别

最新推荐文章于 2024-05-27 16:40:46 发布

原创最新推荐文章于 2024-05-27 16:40:46 发布 · 633 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，其中包含了三个复选框，并通过JavaScript和jQuery来演示如何获取复选框的状态。通过对比checked属性的不同读取方式，展示了它们之间的区别。

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<input type="checkbox" id="test1"/>
<input type="checkbox" checked="" id="test2"/>
<input type="checkbox" checked="checked" id="test3"/>
<script src="jquery-3.1.1.js"></script>
<script>
elem = document.getElementById("test3");
console.log(elem.checked)   //true (Boolean) 将随着复选框状态的改变而改变
console.log($(elem).prop("checked"))   //true (Boolean) 将随着复选框状态的改变而改变
console.log(elem.getAttribute("checked"))   //"checked" (String) 复选框的初始状态;不会改变
console.log($(elem).attr("checked")) //(1.6)   "checked" (String) 复选框的初始状态;不会改变

$("#test3").click(function(){
console.log(this.checked);
console.log($(this).prop("checked"));
console.log(this.getAttribute("checked"));
console.log($(this).attr("checked"));
});
</script>
</body>
</html>