您好,登錄后才能下訂單哦!
應(yīng)用場景:
我們應(yīng)該經(jīng)常見到系統(tǒng)中出現(xiàn)列表,會有一個對列表數(shù)據(jù)的操作(如刪除, 修改,查看等)。我們可以在每個列表項后面加一個刪除按鈕,把列表項的相關(guān)參數(shù)(如 id)post到后臺進行刪除。當然如果你每次只要刪除一兩條數(shù)據(jù)這樣子做并沒有什么問題,但是如果你需要一次性刪 除100條,你還去一條 條的刪除嗎?每一次刪除10條會不會更好些呢?
好了,接下來。我們就使用jQuery解決這個問題。
首先,假設(shè)我們需要刪除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>
假設(shè)我們只需傳遞水果的ID到后臺就可以刪除所有水果。那么傳遞一個數(shù)組為[0001,0002,0003,0004,0005]到后臺就可以了。所以,我們需要獲取5個li元素中input標簽的value值。
很明顯,你的思路可能是利用jQuery篩選器先得到li下的input對象數(shù)組,再遍歷這個數(shù)組,判斷每一個input對象,然后判斷input對象是否選中,選中就用val()函數(shù)獲取它的值,然后把該值放入一個用來存儲id的數(shù)組arr中。
【關(guān)鍵點】選擇器,遍歷,數(shù)組。
1.獲取被選中的數(shù)組對象
jQuery的選擇器中' :checkbox' 是查找所有復選框。
$("#fruit :checkbox");
2.遍歷這個對象數(shù)組
jQeury的each函數(shù):為每個匹配元素規(guī)定運行的函數(shù)。
each函數(shù):
語法:
$(selector).each(function(index,element))
參數(shù) | 描述 |
---|---|
function(index,element) | 必需。為每個匹配元素規(guī)定運行的函數(shù)。index - 選擇器的 index 位置element - 當前的元素(也可使用 “this” 選擇器) |
遍歷后,判斷復選框是否被選中.
Jquery的prop函數(shù)(prop函數(shù)是jQuery1.6版本上的):
prop(name|properties|key,value|fn)
獲取在匹配的元素集中的第一個元素的屬性值。隨著一些內(nèi)置屬性的DOM元素 或window對象,如果試圖將刪除該屬性,瀏覽器可能會產(chǎn)生錯誤。jQuery第一次分配undefined值的屬性,而忽略了瀏覽器生成的任何錯誤
參數(shù) | 類型 | 版本 |
---|---|---|
name(屬性名稱) | String | V1.6 |
properties(作為屬性的“名/值對“對象) | Map(String, Object) | V1.6 |
key,function(index, attr) (屬性名稱,屬性值) | String, Function | V1.6 |
[注意]key,function(index,attr)中返回的屬性值的函數(shù),第一個參數(shù)為當前
元素的索引值,第二個參數(shù)為原先的屬性值。
示例:
1.參數(shù)name的描述:
選中復選框的為true, 沒選中為false
選中:
$("input[type='checkbox']").prop("checked",true);
沒選中:
$("input[type='checkbox']").prop("checked",false);
2.參數(shù)perporties描述:
禁用頁面上的所有復選框。
$("input[type='checkbox']").prop({disabled:true});
3.參數(shù)key,回調(diào)函數(shù)描述:
通過函數(shù)來設(shè)置所有頁面上的復選框反選。
$("input[type='checkbox']").prop("checked",fucntion(i, val){ return !val; });
3.數(shù)組
這個最簡單。jQuery定義一個數(shù)組。
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實現(xiàn)了復選框的取值,是不是非常簡單?
總結(jié)
以上所述是小編給大家介紹的jQuery實現(xiàn)獲取選中復選框的值,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。