jQuery lấy giá trị của các hộp kiểm được chọn vào mảng

Question

Tôi đang cố gắng lấy 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 thời điểm này:

$("#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 kết quả này nhiều hơn tôi cần. Tôi không chỉ nhận được các giá trị, nhưng một số thứ khác tôi không muốn.

[ "51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002", prevObject: jQuery.fn.jQuery.init [3], bối cảnh: tài liệu, jquery: "1.9.1", constructor: chức năng, init: chức năng…]

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

Bằng cách sử dụng $.each và đẩy giá trị cho một mảng tôi nhận được kết quả mong muốn:

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

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

Tuy nhiên tôi d 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

Answer 1

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

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

mỗi the documentation:

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

Answer 2

Bạn cần phải thêm .toArray() đến hết chức năng .map() 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); 
}); 

Demo: http://jsfiddle.net/sZQtL/

Answer 3

Tôi đã tái cấu trúc mã của bạn một chút và tin rằng tôi đã tìm ra giải pháp mà bạn đang tìm kiếm. Về cơ bản thay vì đặt searchIDs là kết quả của .map() Tôi vừa đẩy 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 một fiddle với mã đang chạy.

Answer 4

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 bạn vì nó được viết bằng các thông số kỹ thuật: http://api.jquery.com/map/

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

Answer 5

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 phần 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.

Answer 6

Cần các phần tử biểu mẫu được đặt tên trong HTML làm mảng để là mảng trong đối tượng javascript, như thể biểu mẫu đã được gửi thực sự.

Nếu có một mẫu với nhiều hộp kiểm 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ó tấn các 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 chính xác muốn tôi muốn: Convert form data to JavaScript object with jQuery

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

Hy vọng điều này sẽ hữu ích. Namaste!

Answer 7

 var ids = []; 

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

Điều này phù hợp với tôi!