溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
應用場景：
我們應該經常見到系統中出現列表，會有一個對列表數據的操作（如刪除， 修改，查看等）。我們可以在每個列表項后面加一個刪除按鈕，把列表項的相關參數（如 id）post到后臺進行刪除。當然如果你每次只要刪除一兩條數據這樣子做并沒有什么問題，但是如果你需要一次性刪 除100條，你還去一條 條的刪除嗎？每一次刪除10條會不會更好些呢？
好了，接下來。我們就使用jQuery解決這個問題。
首先，假設我們需要刪除5個列表項。HTML里面列表標簽是ul和ol, 其中ul是無序的，而ol是有序。每一個列表項使用li。
<ul id="fruit"> <li><input type="checkbox" value="0001"/>蘋果</li> <li><input type="checkbox" value="0002"/>梨子</li> <li><input type="checkbox" value="0003"/>芒果</li> <li><input type="checkbox" value="0004"/>山楂</li> <li><input type="checkbox" value="0005"/>香蕉</li> </ul>
假設我們只需傳遞水果的ID到后臺就可以刪除所有水果。那么傳遞一個數組為[0001,0002,0003,0004,0005]到后臺就可以了。所以，我們需要獲取5個li元素中input標簽的value值。
很明顯，你的思路可能是利用jQuery篩選器先得到li下的input對象數組，再遍歷這個數組，判斷每一個input對象,然后判斷input對象是否選中，選中就用val()函數獲取它的值，然后把該值放入一個用來存儲id的數組arr中。
【關鍵點】選擇器，遍歷，數組。
1.獲取被選中的數組對象
jQuery的選擇器中' :checkbox' 是查找所有復選框。
$("#fruit :checkbox");
2.遍歷這個對象數組
jQeury的each函數：為每個匹配元素規定運行的函數。
each函數：
語法：
$(selector).each(function(index,element))
| 參數 | 描述 |
|---|---|
| function(index,element) | 必需。為每個匹配元素規定運行的函數。index - 選擇器的 index 位置element - 當前的元素（也可使用 “this” 選擇器） |
遍歷后，判斷復選框是否被選中.
Jquery的prop函數(prop函數是jQuery1.6版本上的):
prop(name|properties|key,value|fn)
獲取在匹配的元素集中的第一個元素的屬性值。隨著一些內置屬性的DOM元素 或window對象，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤
| 參數 | 類型 | 版本 |
|---|---|---|
| name(屬性名稱) | String | V1.6 |
| properties(作為屬性的“名/值對“對象) | Map(String, Object) | V1.6 |
| key,function(index, attr) (屬性名稱，屬性值) | String, Function | V1.6 |
[注意]key,function(index,attr)中返回的屬性值的函數，第一個參數為當前
元素的索引值，第二個參數為原先的屬性值。
示例：
1.參數name的描述：
選中復選框的為true, 沒選中為false
選中：
$("input[type='checkbox']").prop("checked"，true);
沒選中：
$("input[type='checkbox']").prop("checked"，false);
2.參數perporties描述：
禁用頁面上的所有復選框。
$("input[type='checkbox']").prop({disabled:true});
3.參數key,回調函數描述：
通過函數來設置所有頁面上的復選框反選。
$("input[type='checkbox']").prop("checked",fucntion(i, val){
return !val;
});
3.數組
這個最簡單。jQuery定義一個數組。
var arr = new Array();
所以最后的代碼：
<!DOCTYPE html>
<html>
<head>
<title>Jquery復選框練習</title>
<!-- 引入jQuery，引入你自己的jQuery文件 -->
<script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
</head>
<body>
<div>
<p>選擇要購買的水果</p>
<ul class="fruit">
<li><input type="checkbox" value="001"/>蘋果</li>
<li><input type="checkbox" value="002"/>雪梨</li>
<li><input type="checkbox" value="003"/>芒果</li>
<li><input type="checkbox" value="004"/>菠蘿</li>
</ul>
<input type="checkbox" id="All"/>
<button id="checkAll">全選</button>
<button id="nothing">全不選</button>
<button id="reverseAll">反選</button>
<button class="chooseFruit">購買</button>
<script type="text/javascript">
<!-- 選擇全部/全不選 -->
$("#All").click(function(){
if("this.checked"){
$("#fruit :checkbox").prop("checked", true);
}else{
$("#fruit :checkbox").prop("checked", false);
}
});
<!--選擇全部-->
$("#checkAll").click(function(){
$("#fruit :checkbox").prop("checked", true);
});
<!--全不選-->
$("#nothing").click(function(){
$("#fruit :checkbox").prop("checked", false);
});
<!--反選-->
$("#reverseAll").click(function(){
$("#fruit :checkbox").each(function(i){
$(this).prop("checked", !$(this).prop("checked"));
});
});
<!--獲取選中復選框的值-->
$(".chooseFruit").click(function(){
var arr = new Array();
$("#fruit :checkbox[checked]").each(function(i){
arr[i] = $(this).val();
});
var vals = arr.join(",");
console.log(vals);
});
</script>
</div>
</body>
</html>
至此，jQuery實現了復選框的取值，是不是非常簡單？
總結
以上所述是小編給大家介紹的jQuery實現獲取選中復選框的值，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
