jQuery实现获取选中复选框的值
應(yīng)用場景：
我們應(yīng)該經(jīng)常見到系統(tǒng)中出現(xiàn)列表，會(huì)有一個(gè)對列表數(shù)據(jù)的操作（如刪除，
修改，查看等）。我們可以在每個(gè)列表項(xiàng)后面加一個(gè)刪除按鈕，把列表項(xiàng)的
相關(guān)參數(shù)（如 id）post到后臺(tái)進(jìn)行刪除。當(dāng)然如果你每次只要?jiǎng)h除一兩條數(shù)
據(jù)這樣子做并沒有什么問題，但是如果你需要一次性刪 除100條，你還去一條
條的刪除嗎？每一次刪除10條會(huì)不會(huì)更好些呢？
好了，接下來。我們就使用jQuery解決這個(gè)問題。
首先，假設(shè)我們需要?jiǎng)h除5個(gè)列表項(xiàng)。HTML里面列表標(biāo)簽是ul和ol, 其中ul是無序的，而ol是有序。每一個(gè)列表項(xiàng)使用li。
?
假設(shè)我們只需傳遞水果的ID到后臺(tái)就可以刪除所有水果。那么傳遞一個(gè)數(shù)組為[0001,0002,0003,0004,0005]到后臺(tái)就可以了。所以，我們需要獲取5個(gè)li元素中input標(biāo)簽的value值。
很明顯，你的思路可能是利用jQuery篩選器先得到li下的input對象數(shù)組，再遍歷這個(gè)數(shù)組，判斷每一個(gè)input對象,然后判斷input對象是否選中，選中就用val()函數(shù)獲取它的值，然后把該值放入一個(gè)用來存儲(chǔ)id的數(shù)組arr中。
【關(guān)鍵點(diǎn)】選擇器，遍歷，數(shù)組。
1.獲取被選中的數(shù)組對象
jQuery的選擇器中’ :checkbox’ 是查找所有復(fù)選框。
?
2.遍歷這個(gè)對象數(shù)組
jQeury的each函數(shù)：為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。
each函數(shù)：
語法： $(selector).each(function(index,element))?
[注意]key,function(index,attr)中返回的屬性值的函數(shù)，第一個(gè)參數(shù)為當(dāng)前
元素的索引值，第二個(gè)參數(shù)為原先的屬性值。
示例：
1.參數(shù)name的描述： 選中復(fù)選框的為true, 沒選中為false 選中： $("input[type='checkbox']").prop("checked"，true); 沒選中： $("input[type='checkbox']").prop("checked"，false);2.參數(shù)perporties描述： 禁用頁面上的所有復(fù)選框。 $("input[type='checkbox']").prop({disabled:true});3.參數(shù)key,回調(diào)函數(shù)描述： 通過函數(shù)來設(shè)置所有頁面上的復(fù)選框反選。 $("input[type='checkbox']").prop("checked",fucntion(i, val){return !val; });3.數(shù)組
這個(gè)最簡單。jQuery定義一個(gè)數(shù)組。
所以最后的代碼：
<!DOCTYPE html> <html> <head><title>Jquery復(fù)選框練習(xí)</title><!-- 引入jQuery，引入你自己的jQuery文件 --><script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script> </head> <body><div><p>選擇要購買的水果</p><ul id="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"));});});<!--獲取選中復(fù)選框的值-->$(".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>轉(zhuǎn)自：https://blog.csdn.net/sinat_20418545/article/details/73478617
總結(jié)
以上是生活随笔為你收集整理的jQuery实现获取选中复选框的值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 福平沿海抗日游击队第8中队驻地旧址怎么样
- 下一篇： 关于JQ的点击事件在微信手机端无响应的解