Checkbox 是可以多選的，而且這些多選的選項都擁有相同的欄位名稱，而 jQuery 對於處理 checkbox 的方式並不像 多選下拉選單 (select multiple) 直接回傳陣列那樣直覺，如果你用以下程式碼撰寫程式，得到的將只會有「第一個勾選項目」的值，並非所有勾選項目的完整內容！
若你想取得所有勾選項目值為一個陣列，寫法稍微複雜一些些，第一種寫法要先定義好一個陣列再透過 .each() 取值：
|
1 2 |
var cbxVehicle = new Array(); $('input:checkbox:checked[name="vehicle"]').each(function(i) { cbxVehicle[i] = this.value; }); |
另一個寫法是透過 .map() 將回傳值轉譯成為另一種陣列，如下：
|
1 |
$('input:checkbox:checked[name="vehicle"]').map(function() { return $(this).val(); }).get(); |
另外還有一種解法，就是透過 jQuery Batch Plugin 來取值，載入這個 Plugin 後，程式碼變成如下：
|
1 |
$('input:checkbox:checked[name="vehicle"]').vals(); |
另外以下為制作全選/全不選的checkbox，下列為html格式
|
1 2 3 4 5 6 |
<input name="user_active_col[]" type="checkbox" value="1"> 1 <input name="user_active_col[]" type="checkbox" value="2"> 2 <input name="user_active_col[]" type="checkbox" value="3"> 3 <input name="user_active_col[]" type="checkbox" value="4"> 4 <input name="user_active_col[]" type="checkbox" value="5"> 5 <input name="clickAll" id="clickAll" type="checkbox"> 全選 |
下列為Javascript語法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$("#clickAll").click(function() { if($("#clickAll").prop("checked")) { $("input[name='user_active_col[]']").each(function() { $(this).prop("checked", true); }); } else { $("input[name='user_active_col[]']").each(function() { $(this).prop("checked", false); }); } }); |
62397 全部 53 今日