快捷導(dǎo)航

jQuery實(shí)現(xiàn)獲取選中復(fù)選框的值實(shí)例詳解

更新時(shí)間：2018年06月28日 10:15:08 作者：GoGoCoder

這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取選中復(fù)選框的值，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

應(yīng)用場(chǎng)景：

我們應(yīng)該經(jīng)常見(jiàn)到系統(tǒng)中出現(xiàn)列表，會(huì)有一個(gè)對(duì)列表數(shù)據(jù)的操作（如刪除，修改，查看等）。我們可以在每個(gè)列表項(xiàng)后面加一個(gè)刪除按鈕，把列表項(xiàng)的相關(guān)參數(shù)（如 id）post到后臺(tái)進(jìn)行刪除。當(dāng)然如果你每次只要?jiǎng)h除一兩條數(shù)據(jù)這樣子做并沒(méi)有什么問(wèn)題，但是如果你需要一次性刪除100條，你還去一條條的刪除嗎？每一次刪除10條會(huì)不會(huì)更好些呢？

好了，接下來(lái)。我們就使用jQuery解決這個(gè)問(wèn)題。

首先，假設(shè)我們需要?jiǎng)h除5個(gè)列表項(xiàng)。HTML里面列表標(biāo)簽是ul和ol, 其中ul是無(wú)序的，而ol是有序。每一個(gè)列表項(xiàng)使用li。

<ul id="fruit">
 <li><input type="checkbox" value="0001"/>蘋(píng)果</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到后臺(tái)就可以刪除所有水果。那么傳遞一個(gè)數(shù)組為[0001,0002,0003,0004,0005]到后臺(tái)就可以了。所以，我們需要獲取5個(gè)li元素中input標(biāo)簽的value值。

很明顯，你的思路可能是利用jQuery篩選器先得到li下的input對(duì)象數(shù)組，再遍歷這個(gè)數(shù)組，判斷每一個(gè)input對(duì)象,然后判斷input對(duì)象是否選中，選中就用val()函數(shù)獲取它的值，然后把該值放入一個(gè)用來(lái)存儲(chǔ)id的數(shù)組arr中。

【關(guān)鍵點(diǎn)】選擇器，遍歷，數(shù)組。

1.獲取被選中的數(shù)組對(duì)象

jQuery的選擇器中' :checkbox' 是查找所有復(fù)選框。

$("#fruit :checkbox");

2.遍歷這個(gè)對(duì)象數(shù)組

jQeury的each函數(shù)：為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。

each函數(shù)：

語(yǔ)法：

$(selector).each(function(index,element))

參數(shù)	描述
function(index,element)	必需。為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。index - 選擇器的 index 位置element - 當(dāng)前的元素（也可使用 “this” 選擇器）

遍歷后，判斷復(fù)選框是否被選中.

Jquery的prop函數(shù)(prop函數(shù)是jQuery1.6版本上的):

prop(name|properties|key,value|fn)

獲取在匹配的元素集中的第一個(gè)元素的屬性值。隨著一些內(nèi)置屬性的DOM元素或window對(duì)象，如果試圖將刪除該屬性，瀏覽器可能會(huì)產(chǎn)生錯(cuò)誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯(cuò)誤

參數(shù)	類(lèi)型	版本
name(屬性名稱(chēng))	String	V1.6
properties(作為屬性的“名/值對(duì)“對(duì)象)	Map(String, Object)	V1.6
key,function(index, attr) (屬性名稱(chēng)，屬性值)	String, Function	V1.6

[注意]key,function(index,attr)中返回的屬性值的函數(shù)，第一個(gè)參數(shù)為當(dāng)前
元素的索引值，第二個(gè)參數(shù)為原先的屬性值。

示例：

1.參數(shù)name的描述：

選中復(fù)選框的為true, 沒(méi)選中為false

選中：

$("input[type='checkbox']").prop("checked"，true);

沒(méi)選中：

$("input[type='checkbox']").prop("checked"，false);

2.參數(shù)perporties描述：

禁用頁(yè)面上的所有復(fù)選框。

$("input[type='checkbox']").prop({disabled:true});

3.參數(shù)key,回調(diào)函數(shù)描述：

通過(guò)函數(shù)來(lái)設(shè)置所有頁(yè)面上的復(fù)選框反選。

$("input[type='checkbox']").prop("checked",fucntion(i, val){
 return !val;
});

3.數(shù)組

這個(gè)最簡(jiǎn)單。jQuery定義一個(gè)數(shù)組。

var arr = new Array();

所以最后的代碼：

<!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>選擇要購(gòu)買(mǎi)的水果</p>
  <ul class="fruit">
   <li><input type="checkbox" value="001"/>蘋(píng)果</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">購(gòu)買(mǎi)</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>

至此，jQuery實(shí)現(xiàn)了復(fù)選框的取值，是不是非常簡(jiǎn)單？

總結(jié)

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)獲取選中復(fù)選框的值，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: