2012年9月4日 星期二

jQuery 處理 checkbox 多選

在可以多選的 checkbox 欄位,在網路上可以找到一些利用 jQuery 的 selection 篩選的方法
但是我試起來好像都有點怪怪的~
例如是有看到有人分享的 selection 方法可以直接檢查 "checked" 這個屬性
但是我的測試好像沒有用:
$("input[name='multi_choice'][@checked]").each(function(value, element) {
  console.log("element: " + $(element).attr("checked"));
});
這樣的程式碼在我的測試裡會全部的 checkbox 都被選到..。
後來查到 [2] 的寫法,就可以順利取道被選取的 checkbox 了。

HTML
<input type="checkbox" name="multi_choice"></input>
<input type="checkbox" name="multi_choice"></input>
<input type="checkbox" name="multi_choice"></input>
<input type="checkbox" name="multi_choice"></input>
<input type="checkbox" name="multi_choice"></input>
jQuery
$("input[name='multi_choice']:checked").each(function(value, element) {
  console.log("element: " + $(element).attr("checked"));
});

另外 jQuery selector 選出來的 Object 可以直接用 .length() 取得數目
因此可以利用 .length() 取得被選取的 checkbox 的數量。
$("input[name='multi_choice']:checked").length();

參考資料:
1、jQuery selectors
2、jquery multiple checkboxes array

沒有留言: