How to select all elements in name array?

Question

I am trying to sum a collection of radio selections using jQuery.

<input name="cost[alpha]" type="radio" >
<input name="cost[beta]" type="radio">
<input name="cost[delta]" type="radio">
...
$('input[name="cost[*]"]').each( function() {
    ...
}

This does not function as it tries to resolve an input with the name "cost[*]". Ideally I would like to iterate over any element in the cost array. Is there a preferred way of doing this with jQuery? I have other elements in my form that use the radio type so selecting radios in general is not a valid option.

Community · Accepted Answer · 2017-05-23 10:26:13Z

6

Make the attribute selector the "starts with" selector (^=):

$('input[name^="cost"]').each(function() {
    ...
});

If you find that you have other input elements that start with "cost" or even "cost[", then perhaps you want to think about changing the way you're querying for the elements. One alternative would be adding a special class name to the elements you're targeting and forget about their names altogether. For example:

<input name="cost[alpha]" type="radio" class="form-cost">
<input name="cost[beta]" type="radio" class="form-cost">
<input name="cost[delta]" type="radio" class="form-cost">

And then your selector is very simple and very targeted:

$('input.form-cost').each(function() {
    ...
});

You might get the best performance out of simply wrapping the elements in a container with a unique id or class name, and querying for input elements that it contains (as suggested by Allende in the comments):

<div id="cost-inputs">
    <input name="cost[alpha]" type="radio">
    <input name="cost[beta]" type="radio">
    <input name="cost[delta]" type="radio">
</div>

$('#cost-inputs input').each(function() {
    ...
});

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Mar 10, 2014 at 19:22

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DontVoteMeDown Over a year ago

Damn you was faster than me. haha +1

Ben Campbell Over a year ago

Could you elaborate as to why using a start of the line match versus a glob "input[name*='cost[']" match as illustrated below would be beneficial? I wonder if this method would have issue if I had other fields with "cost" as the first four characters of their name.

Cᴏʀʏ Over a year ago

@Benji: Good point. You might want to add a trailing '[' to avoid clashing with other inputs. If necessary, you could restrict it further by changing the selector to input[type="radio"][name^="cost["]. Generally a "starts-with" comparison algorithm is faster than a "contains" algorithm, which is why I suggested it.

Cedric Guindon Over a year ago

If you are trying to count the amount of input you have you could add a counter to your function like so: .each(function(counter) {

Allende Over a year ago

I think add an specific class or better yet to wrap them in a div will prevent the issue about naming collision and also probably will improve the performance (if radios are wrapped in a div you have no need to deal with selector expressions).

|

Anoop Joshi P · Accepted Answer · 2014-03-10 19:22:28Z

2

Try with contains selector in jquery

$("input[name*='cost[']").each(function(){});

answered Mar 10, 2014 at 19:22

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

Allende · Accepted Answer · 2014-03-10 19:28:13Z

1

Try:

var sum = 0;
$("input[name^='cost']").each(function() {
     sum += Number($(this).val());
});

About "Starts With Selector": [name^="value"]
https://api.jquery.com/attribute-starts-with-selector/

edited Mar 10, 2014 at 19:28

answered Mar 10, 2014 at 19:23

Allende

1,4822 gold badges23 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to select all elements in name array?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related