jQuery nhận các giá trị của các hộp kiểm tra vào mảng


127

Tôi đang cố gắng để có được giá trị của tất cả các hộp kiểm hiện đang được kiểm tra và lưu trữ chúng vào một mảng. Đây là mã của tôi cho đến nay:

 $("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    });
    console.log(searchIDs);
  });

Tuy nhiên điều này đầu ra nhiều hơn tôi cần. Tôi không chỉ nhận được các giá trị, mà một số thứ khác tôi không muốn.

[

Tôi chỉ muốn ID (3 mục đầu tiên trong trường hợp này).

Bằng cách sử dụng $.eachvà đẩy các giá trị vào một mảng, tôi nhận được đầu ra mong muốn:

$("#find-table input:checkbox:checked").each(function(){ myArray.push($(this).val()); })

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002"]

Tuy nhiên tôi muốn sử dụng $.map, vì nó giúp tôi tiết kiệm một dòng mã và đẹp hơn.

Cảm ơn

Câu trả lời:


260

Gọi .get()ở cuối để biến đối tượng jQuery kết quả thành một mảng thực sự.

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); // <----
    console.log(searchIDs);
});

Theo tài liệu :

Vì giá trị trả về là một đối tượng jQuery, chứa một mảng, nên việc gọi .get () trên kết quả để làm việc với một mảng cơ bản là rất phổ biến.


1
Tôi đã mong đợi Array thực sự từ $.map. Cảm ơn giải pháp, nó hoạt động.
nếu __name__ là Không có

Cảm ơn bạn rất nhiều, tôi cần điều này cho ma Ticketcenter
Steven

2
Điều tôi không hiểu về điều này là tại sao lại .get()cần thiết, khi hàm trả về .val()từ mỗi mục trong bộ sưu tập jQuery. Đây có phải là vì mapbiến nó trở lại thành một đối tượng jQuery trước khi chuyển nó sang searchIDs?
iconoclast

Chúng ta có thể nhận được giá trị như kiểu mảng không?
krutssss

21

DEMO: http://jsfiddle.net/PBhHK/

$(document).ready(function(){

    var searchIDs = $('input:checked').map(function(){

      return $(this).val();

    });
    console.log(searchIDs.get());

});

Chỉ cần gọi get () và bạn sẽ có mảng của mình vì nó được viết trong thông số kỹ thuật: http://api.jquery.com/map/

$(':checkbox').map(function() {
      return this.id;
    }).get().join();

18

Bạn cần thêm .toArray()vào cuối .map()chức năng của bạn

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
        return $(this).val();
    }).toArray();
    console.log(searchIDs);
});

Bản trình diễn: http://jsfiddle.net/sZQtL/


10

Tôi đã cấu trúc lại mã của bạn một chút và tin rằng tôi đã đưa ra giải pháp mà bạn đang tìm kiếm. Về cơ bản thay vì thiết lập searchIDslà kết quả của việc .map()tôi chỉ đẩy các giá trị vào một mảng.

$("#merge_button").click(function(event){
  event.preventDefault();

  var searchIDs = [];

  $("#find-table input:checkbox:checked").map(function(){
    searchIDs.push($(this).val());
  });

  console.log(searchIDs);
});

Tôi đã tạo ra một fiddle với mã đang chạy.


5
     var ids = [];

$('input[id="find-table"]:checked').each(function() {
   ids.push(this.value); 
});

Cái này làm việc cho tôi!


1

Cần các thành phần biểu mẫu có tên trong HTML dưới dạng một mảng để trở thành một mảng trong đối tượng javascript, như thể biểu mẫu đã thực sự được gửi.

Nếu có một biểu mẫu có nhiều hộp kiểm, chẳng hạn như:

<input name='breath[0]' type='checkbox' value='presence0'/>
<input name='breath[1]' type='checkbox' value='presence1'/>
<input name='breath[2]' type='checkbox' value='presence2'/>
<input name='serenity'  type='text' value='Is within the breath.'/>
...

Kết quả là một đối tượng với:

data = {
   'breath':['presence0','presence1','presence2'],
   'serenity':'Is within the breath.'
}


var $form = $(this),
    data  = {};

$form.find("input").map(function()
{
    var $el  = $(this),
        name = $el.attr("name");

    if (/radio|checkbox/i.test($el.attr('type')) && !$el.prop('checked'))return;

    if(name.indexOf('[') > -1)
    {
        var name_ar = name.split(']').join('').split('['),
            name    = name_ar[0],
            index   = name_ar[1];

        data[name]  = data[name] || [];
        data[name][index] = $el.val();
    }
    else data[name] = $el.val();
});

Và có rất nhiều câu trả lời ở đây đã giúp cải thiện mã của tôi, nhưng chúng quá phức tạp hoặc không thực sự muốn như tôi muốn: Chuyển đổi dữ liệu biểu mẫu thành đối tượng JavaScript bằng jQuery

Hoạt động nhưng có thể được cải thiện: chỉ hoạt động trên mảng một chiều và các chỉ mục kết quả có thể không tuần tự. Thuộc tính độ dài của một mảng trả về số chỉ mục tiếp theo là độ dài của mảng, không phải chiều dài thực sự.

Hy vọng điều này sẽ giúp. Nam vị!


1
var idsArr = [];

$('#tableID').find('input[type=checkbox]:checked').each(function() {
    idsArr .push(this.value);
});

console.log(idsArr);

0

Không sử dụng "mỗi". Nó được sử dụng cho các hoạt động và thay đổi trong cùng một yếu tố. Sử dụng "bản đồ" để trích xuất dữ liệu từ phần tử phần tử và sử dụng nó ở một nơi khác.


Các tài liệu jQuery có các ví dụ tuyệt vời cho hầu hết mọi thứ, bao gồmmap
jinglểula

0

ở đây cho phép là lớp các hộp kiểm trên các trang và var cho phép thu thập chúng trong một mảng và bạn có thể kiểm tra xem có đúng trong vòng lặp sau đó thực hiện riêng thao tác mong muốn không. Ở đây tôi đã thiết lập tính hợp lệ tùy chỉnh. Tôi nghĩ rằng nó sẽ giải quyết vấn đề của bạn.

  $(".allows").click(function(){
   var allows = document.getElementsByClassName('allows');
   var chkd   = 0;  
   for(var i=0;i<allows.length;i++)
   {
       if(allows[i].checked===true)
       {
           chkd = 1;
       }else
       {

       }
   }

   if(chkd===0)
   {
       $(".allows").prop("required",true);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("Please select atleast one option");
        }

   }else
   {
       $(".allows").prop("required",false);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("");
        }
   }

}); 
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.