How can I convert a jQuery object to a JS array?

Question

Here is my old code:

checkboxes = document.getElementsByName('foo');

As you know, checkboxes will be an array. Now I need to limit selecting scope. So this is my new code:

checkboxes = $('.myclass input[name=foo]');

But in this case checkboxes isn't an array anymore, it's a jQuery object. How can I make it the same as getElementsByName('foo')'s result?

---

Note that $('.myclass input[name=foo]')[0] won't work either.

• Rohan Kumar: Make sure all your checkboxes are inside an container whose class is myclass. Otherwise $('.myclass input[name=foo]')[0] will definitely work.
• Shafizadeh: @RohanKumar Actually I've some other checkboxes which are out of the .myclass element and I don't want to select them. That's why I'm trying to use $('.myclass input[name=foo]') instead of document.getElementsByName('foo'). Anyway, my question is a totally different thing.
• Denis Tsoi: is .myclass also an input?
• Rohan Kumar: Can you show up your relevant code with html to solve your problem. You can create a Snippet for this too. Also, check that you have included a jquery version in your page.
• Rohan Kumar: Its SO, so every developer will definitely learn from this site. And you have many ways to do a single job in an optimised and even in a shortest way.

Answer 1

Try .toArray()

checkboxes = $('.myclass input[name=foo]').toArray();

Answer 2

Use this

var checked = [];
$.each($("input[name='foo']:checked"), function(){
checked.push($(this). val());
});

Answer 3

Charlie already pointed out that jQuery objects have a toArray() function. That would work I think. Figured it was also worth noting that there is also a .makeArray() function for generally converting array-like objects to native JavaScript arrays. https://api.jquery.com/jQuery.makeArray/

Answer 4

You can use .map() and create an array of underlying DOM which getElementsByName() returns

checkboxes = $('.myclass input[name=foo]').map(function(){ return this;}).get();

I would recommend @Charlie answer

---

You don't need to convert to Node elements array. Change your function to

function toggle(source, target) {
 $(target).find('input[name=foo]').prop('checked', source.checked);
}

Usage

toggle(source, '.compare_people')
toggle(source, '.compare_posts')

• Shafizadeh: It's nice of you recommending the answer of a person who has much less rep than you.
• Satpal: @Shafizadeh, Reputation at SO means nothing. Clearly he gave a better answer I totally forgot about that function

Answer 5

document.querySelectorAll("input[name=foo]")

Answer 6

Getting javascript object from jquery object by $('selector')[0] should work. See the answer from this link How to get javascript control from JQuery object? I suspect your selector is the reason why the above approach doesn't work. Add double quotes to name value will make it work:

checkboxes = $('.myclass input[name="foo"]');