jQuery(四)——jQuery 的屬性操作：attr()、prop()
阿新 • • 發佈：2021-02-17
技術標籤：JavaWebjsjqueryjavascriptjavacheckbox
2. jQuery 的屬性操作
- attr() 可以設定和獲取屬性的值，不推薦操作 checked、readOnly、selected、disabled 等等
此外，attr 方法還可以操作非標準的屬性。比如自定義屬性：abc,bbj - prop() 可以設定和獲取屬性的值,只推薦操作 checked、readOnly、selected、disabled等等
2.1 attr、prop案例演示
<!DOCTYPE html>
<html lang="en">
< 對於checked屬性，只要寫了checked=""，存在這樣的屬性定義，裡面不用賦值或者隨便賦值checked=""(空串)、checked=“abc”、checked=“checked”,都認為是checked=“checked”。
當獲取checked、selected、disabled等屬性，我們只關心它們是否被選中（true、false），而不關係它們具體的值，因此獲取這種屬性的值時，推薦用prop方法。
$(":checkbox:first").attr("name","checkbox3") ; 可以用attr方法設定第一個checkbox的name屬性的值
那麼怎麼設定第一個checkbox的checked屬性，使其被選中或者取消選中呢？
$(":checkbox:first").prop("checked",false ); //取消選中
$(":checkbox:eq(1)").prop("checked",true ); //被選中，true、false 不加引號
其中第二條被選中可以用val方法替代：
$(":checkbox").val(["checkbox2"]);
此時是把這三個checkbox看成一組選項，val[ ’ ’ ] 裡面填的是欲選中的該組的其中的checkbox的屬性值即可選中。
注意，這種方法只能獲取是否被選中，使之初始化時選中，不能取消選中。
個人感覺：這兩種方法：val更偏向於初始化時操作，prop使用會更多。
辨析：
- text 和 html方法是獲取和設定標籤之間省略號部分的內容 < span >……< /span >
- val方法是獲取和設定ipnut便籤的內容：當input為text password時，和text方法差不多；
當為radio單選框 、checkbox多選框、 select下拉列表時，可以判斷是否選中和沒有選中，和prop方法差不多。 - attr方法是可以獲得標籤的屬性的取值 < span ……> < /span>
此外，attr方法還支援自定義自己的標籤屬性給一個標籤屬性：
假設 定義給上面的checkbox1定義一個名叫DIYlable的屬性，給該屬性賦值為"my label"。
<script tyep="text/javascript">
$(function () {
$(":checkbox:first").attr("DIYlabel","my label");
alert($(":checkbox").first().attr("DIYlabel"));
});
</script>
2.2 應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-31</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
實現功能的程式碼
</script>
</head>
<body>
<form method="post" action="">
你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球" />籃球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 選" />
<input type="button" id="checkedNoBtn" value="全不選" />
<input type="button" id="checkedRevBtn" value="反 選" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
介面如圖所示：
要求實現：
- 全選、全不選、反選 按鈕基本功能
- 全選/全不選 多選框：當選中時，下面多選框也全選中；當從選中變為未選中時，下面多選框也全不選中。(主動)
- 一個個的選，當滿足全選的時候，全選/全部選標籤 也被選中，其他情況下，全不選或者沒選完時都不會打上。(被動)
- 【提交】按鈕，對選中的球進行輸出
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
1. 給 全選按鈕 繫結單擊事件,除button按鈕外，都選中 (因為這裡只有button和checkbox)
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked", true);
}); //同時，全選/全不選 也被選中
2. 給 全不選按鈕 繫結單擊事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked", false);
}); //全選/全不選 不被選中
3. 給 反選按鈕 繫結單擊事件
$("#checkedRevBtn").click(function () {
$(":checkbox").each(function () {
this.checked=!this.checked;
});// 在each遍歷的function函式中，有一個this物件。這個this物件是當前正在遍歷到的dom物件
//但是注意兩個的極端情況，當本身全選時，反選就是全不選；當本身全不選時，反選就是全選
//當反選是全選時，需要給選/全不選 input標籤 也給選上；當反選是全不選時，無影響，不考慮；
var allCnt=$(":checkbox[name='items']").length;
// 獲取全部的球類個數，是個定值, 當[name！='items']時，需要先判斷name屬性是否存在，等於時不用
var checkedCnt=$(":checkbox[name='items']:checked").length;
// 再獲取 選中 的球類個數
$("#checkedAllBox").prop("checked",allCnt==checkedCnt);
//判斷全選/全不選 input標籤 是否選中，當選中的球類個數等於全部的時候，代表該是全選了，為true
});
4. 給 全選/全不選 多選框 繫結點選事件
$("#checkedAllBox").click(function () {
// alert(this.checked);
//經測試得知，在該函式中的this物件，是點選多選框之後的this物件，即先點選多選框，再判斷this.checked
//所以，當點選完選中後，同時會輸出true；不選中點選後，會輸出false，利用這一特性，不用再if判斷了
$(":checkbox[name='items']").prop("checked",this.checked);
}); //給所有name='items'的多選框修改屬性值
4plus. 4存在一個問題，當一個個選，當全選時，也會觸發全選/全不選 多選框，此時再取消一個，也要判斷是不是取消全選/全不選
// 給每個球的多選框都繫結單擊事件
$(":checkbox[name='items']").click(function () {
//每選中一個球，都要判斷是不是最後一個
var allCnt=$(":checkbox[name='items']").length;
var checkedCnt=$(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCnt==checkedCnt);
});
5.【提交】按鈕單擊事件，對選中的球進行輸出
$("#sendBtn").click(function () {
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
});
});
});
</script>