jQuery: Trả về giá trị của hộp kiểm dưới dạng mảng?

Question

Điều này khiến tôi bối rối. Tôi có thể dễ dàng nhận được giá trị của một multiselect như một mảng, và vượt qua nó để một yêu cầu ajax:

<select id="countries" class="multiselect" multiple="multiple" name="countries[]"> 
    <option value="AFG">Afghanistan</option> 
    <etc> 
... 
$countries_input = $("#countries"); 
var countries = $countries_input.val(); 
$.ajax({ 
    data: { 
    country : countries, 
    ... 
    }, 
    ... 
}); 

nhưng tôi không thể tìm thấy bất kỳ cách tương đương để có được giá trị của một hộp kiểm với nhiều lựa chọn. Nội dung hiển thị không hoạt động:

<input type="checkbox" name="check[]" value="foo1"/>foo1<br/> 
<input type="checkbox" name="check[]" value="foo2"/>foo2<br/> 
... 
var bar = $('input:checkbox[name=check]').val();   // undefined 
var bar = $('input:checkbox[name=check[]]').val();  // also undefined 
var bar = $('input:checkbox[name=check]:checked').val(); // also undefined 

Bất kỳ ý tưởng nào? Cảm ơn.

Answer 1

Không có chức năng jQuery tích hợp cho điều đó. Bạn phải làm điều đó cho chính bản thân mình. Bạn có thể làm điều đó một cách dễ dàng đủ với một vòng lặp đơn giản:

var vals = [] 
$('input:checkbox[name="check[]"]').each(function() { 
    vals.push(this.value); 
}); 

Hoặc nếu bạn chỉ muốn những người kiểm tra:

var vals = [] 
$('input:checkbox[name="check[]"]').each(function() { 
    if (this.checked) { 
     vals.push(this.value); 
    } 
}); 

Hoặc bạn có thể sử dụng map và get:

var vals = $('input:checkbox[name="check[]"]').map(function() { 
    return this.value; 
}).get(); 

Hoặc nếu bạn chỉ muốn những người được chọn:

var vals = $('input:checkbox[name="check[]"]').map(function() { 
    return this.checked ? this.value : undefined; 
}).get(); 

---

Side lưu ý 1: jQuery đòi hỏi giá trị trong một selector giá trị thuộc tính (các loại trên) luôn được trong dấu ngoặc kép, mặc dù thời điểm viết bài này mặc dù ghi lại rằng nó vẫn còn lỏng lẻo về nó. Đó là một điều jQuery, nhưng trong trường hợp này bạn cũng cần nó cho CSS (CSS2 Reference | CSS3 Reference) vì giá trị của bạn bao gồm [], không hợp lệ cho các giá trị không có dấu ngoặc kép trong CSS. (Trong CSS, mà không có dấu ngoặc kép các giá trị phải được identifiers.)

---

Side lưu ý 2: Lưu ý tôi đã sử dụng this.value trong các chức năng lặp ở trên để nhận được giá trị của input, chứ không phải là $(this).val(). Nó là khá nhiều chỉ là một điều phong cách, không phải là tốt hơn so với khác từ tất cả các quan điểm. this.value là trực tiếp hơn và nếu bạn biết DOM ở tất cả (và mọi lập trình viên web nên), nó hoàn toàn rõ ràng. Nhưng tất nhiên, trong khi trình duyệt chéo hoàn hảo đáng tin cậy với các hộp kiểm và hầu hết các phần tử input khác, nó không phải là trình duyệt chéo đáng tin cậy với một số trường biểu mẫu khác (ví dụ: select hộp). $(this).val() là thành ngữ hơn trong ứng dụng chuyên sâu jQuery và bạn không phải lo lắng về việc liệu this có phải là input hoặc select. Có, nó cho biết thêm chi phí, nhưng nếu bạn không có hàng ngàn người trong số họ, nó không giống như nó sẽ là vấn đề.

Answer 2

• Nếu bạn không quen với phương thức .map(), hãy để tôi giới thiệu một trong những mục yêu thích của tôi. Ví dụ trên trang hướng dẫn sử dụng cũng có các hộp kiểm. Phương thức .get() có thể được sử dụng để chuyển đổi một bộ sưu tập jQuery thành một đối tượng.

.map(): đèo mỗi phần tử trong hiện tại phù hợp với thiết lập thông qua một chức năng, tạo ra một đối tượng jQuery mới có chứa các giá trị trở lại.

• kiến ​​thức khác bạn cần là bạn phải thoát [] với backslashes bên trong bộ chọn thuộc tính: name=check\[\]]. Edit: Tất nhiên nếu bạn sử dụng cú pháp selector thuộc tính tiêu chuẩn, sẽ không có vấn đề: name="check[]"

Something như thế này sẽ đủ:

var checkedValues = $('input:checkbox[name="check[]"]:checked').map(function() { 
    return $(this).val(); 
}).get(); 

jsFiddle Demo

Answer 3

Tôi sẽ nghĩ serialize() và serializeArray() mảng sẽ hoạt động, nhưng dường như chúng chỉ áp dụng cho trẻ em trong vùng chọn.

Trường hợp xấu nhất tôi sẽ chỉ sử dụng map() để có được mảng như vậy

country : $("your input selector").map(function() {return $(this).val();})