attr()和prop()處理checkbox核取方塊選中和不選中的區別

antzone發表於2017-03-21

標題中的兩個都可以處理checkbox核取方塊的選中和不選中效果，但是兩者又是有區別的，下面就通過程式碼例項對此做一下簡單介紹，希望能夠給需要的朋友帶來幫助。

一.prop()函式:

此函式比較單純，處理的結果也比較單一。

1.如果核取方塊選中，返回值是true。

2.如果核取方塊沒有選中，返回值是false。

3.設定選中和不選中分別使用如下方式:

[JavaScript] 純文字檢視 複製程式碼
.attr("checked",true);
.attr("checked",false);

特別說明:prop()函式是jquery1.6新增。

二.attr()函式:

此函式和prop()函式相比要複雜一些。

在jquery1.6之前:

1.如果核取方塊選中，返回值是true。

2.如果核取方塊沒有選中，返回值是false。

3.設定選中和不選中分別使用如下方式:

[JavaScript] 純文字檢視 複製程式碼
.attr("checked","checked");
.attr("checked",true);

上面的程式碼可以將核取方塊選中。

[JavaScript] 純文字檢視 複製程式碼
.attr("checked","");.attr("checked",false);

上面的程式碼可以取消選中效果。

在jquery1.6和jquery1.6之上:

1.如果核取方塊選中，返回值是checked。

2.如果核取方塊沒有選中，返回值是undefined。

3.設定選中和不選中分別使用如下方式:

[JavaScript] 純文字檢視 複製程式碼
.attr("checked","checked");
.attr("checked",true);

上面的程式碼可以將核取方塊設定為選中狀態。

[JavaScript] 純文字檢視 複製程式碼
$("#ck").attr("checked",false);

以上程式碼可以將核取方塊取消選中。

特別說明:

attr()方法是操作dom元素的attribute屬性，而prop()操作是property屬性。

具體可以參閱js的property和attribute兩種屬性簡單介紹一章節。

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    alert($("#ck").attr("checked"));
  })
})
</script>
</head>
<body>
<input id="ck" type="checkbox"/>
<input type="button" value="檢視效果" id="bt"/>
</body>
</html>

在上面程式碼中，我們選中核取方塊之後，點選按鈕彈出的值依然是undefined，說明覆選框的attribute屬性值並沒有被改變，只是改變了元素物件的property屬性而已。

相關文章