獲取選中checkbox核取方塊的值程式碼例項

admin發表於2017-03-19

checkbox核取方塊是最為常用的表單元素之一，它通常用來羅列出一系列的資料，然後進行多項選擇，下面介紹一下如何利用jQuery獲取選中的checkbox核取方塊的值，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function(){
    var theArray=[];
    $('input:checked').each(function(){ 
      theArray.push($(this).val()); 
    });
    $("#show").text(theArray+"");
  })
})
</script>
</head>
<body>
<div id="show"></div>
<div id="box">
  <input type="checkbox" value="1"/>
  <input type="checkbox" value="2"/>
  <input type="checkbox" value="3"/>
  <input type="checkbox" value="4"/>
  <input type="checkbox" value="5"/>
  <input type="checkbox" value="6"/>
</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的可以獲取選中核取方塊的value屬性值，並將其寫入div，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(document).ready(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

2.$("#bt").click(function(){})，為按鈕註冊click事件處理函式。

3.var theArray=[]，宣告一個空陣列，用來儲存選中的核取方塊的value屬性值。

4.$('input:checked').each(function(){theArray.push($(this).val());})，遍歷每一個選中的核取方塊，並將其value值寫入陣列。

5.$("#show").text(theArray+"")，將陣列中的元素轉換為字串寫入div，陣列與一個空字串進行字串連線，可以將陣列轉換為字串，結果就是陣列中的元素以逗號分隔生成一個字串。

二.相關閱讀:

1.click事件可以參閱jQuery click 事件一章節。 

2.:checked選擇器可以參閱jQuery :checked一章節。 

3.each()函式可以參閱jQuery each()一章節。 

4.push()函式可以參閱javascript push()一章節。 

相關文章