jquery獲取選中checkbox核取方塊的值

antzone發表於2017-04-10
jQuery

本章節介紹一下如何使用jQuery獲取選中的checkbox核取方塊的值。

程式碼例項如下:

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

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

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

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

（3）.var cked = $("#box input:checked")，獲取被選中的核取方塊元素集合。

（4）.var arr = []，宣告一個空陣列用來儲存選中核取方塊的value值。

（5）.$.each(cked,function (index,ele) {

  arr.push(ele.value);

})，將選中核取方塊的value值存入陣列。

（6）.$("#show").text(arr)，顯示陣列中儲存的內容,這裡其實有一個隱式的資料型別轉換，等同於arr.toString()

二.相關閱讀:

（1）.:checked選擇器可以參閱jQuery :checked一章節。

（2）. $.each()可以參閱jQuery.each()一章節。

（3）.push()可以參閱javascript push()一章節。

（4）.text()可以參閱jQuery text()方法一章節。

相關文章