How to count the number of radio button groups (by name attribute)?

Question

There are three single selections on document.

<input  type="radio" name="delete1">yes<input  type="radio" name="delete1">no<input  type="radio" name="delete1">all
<input  type="radio" name="delete2">yes<input  type="radio" name="delete2">no
<input  type="radio" name="delete3">yes<input  type="radio" name="delete3">no

There are 7 elements with document.getElementsByTagName('input').

It is 3 groups for people to select,every group can select 1 input.

I want to get the number of groups not the number of input tags in each groups.

Do you mean that you want to get the current selection from each of the three radio button groups? To start with each input should have a `value` attribute unique within its group. — nnnnnn, Oct 21 '16 at 02:03
It is 3 groups for people to select,every group can select 1 input. — showkey, Oct 21 '16 at 02:07
To be a little clear... you have 3 groups of input tag. each group contains three input tags and you want the user to have the option to select only one in each group?.... — repzero, Oct 21 '16 at 02:10
No,the first one contain 3 input tags ,the other two contains 2 input tags. — showkey, Oct 21 '16 at 02:13
it is no use to write it as `document.getElementsByTagName('input')/2` or `document.getElementsByTagName('input')/3` — showkey, Oct 21 '16 at 02:14

score 2 · Accepted Answer · answered Oct 21 '16 at 02:35

groups = {};
var all_input = document.querySelectorAll('input[type="radio"]');
for (var i = 0; i < all_input.length; ++i) {
  if (!(all_input[i].name in groups)) {
    groups[all_input[i].name] = 0;
  } else {
    groups[all_input[i].name] += 1;
  }


}
var message = Object.keys(groups).length;
console.log(message);
alert(message)

<input type="radio" name="delete1">yes
<input type="radio" name="delete1">no
<input type="radio" name="delete1">all
<input type="radio" name="delete2">yes
<input type="radio" name="delete2">no
<input type="radio" name="delete3">yes
<input type="radio" name="delete3">no

If the sole purpose is to count the groups, couldn't you replace the if/else with just `groups[all_input[i].name] = true` and then use `Object.keys(groups).length`? (If you also want to count the number of radios in each group then the `if` case should be `= 1`.) — nnnnnn, Oct 21 '16 at 02:48

Phil · Answer 2 · 2016-10-21T03:09:32.307

You should be able to count the number of unique name attributes like this

var inputs = document.querySelectorAll('input[type="radio"][name]'),
  inputsByName = Array.prototype.reduce.call(inputs, function(map, input) {
    if (!Object.prototype.hasOwnProperty.call(map, input.name)) {
      map[input.name] = [input];
    } else {
      map[input.name].push(input);
    }
    return map;
  }, Object.create(null));

console.log('Inputs by name: ', inputsByName);
console.log('Unique radio input group count =',
    Object.keys(inputsByName).length);

<input type="radio" name="delete1" value="yes">yes
<input type="radio" name="delete1" value="no">no
<input type="radio" name="delete1" value="all">all
<input type="radio" name="delete2" value="yes">yes
<input type="radio" name="delete2" value="no">no
<input type="radio" name="delete3" value="yes">yes
<input type="radio" name="delete3" value="no">no

This has the added bonus of providing you with a map of all the radio button elements by name.

@repzero I don't really care about the points but I do like to know why somebody thinks this answer is not useful. Thanks all the same — Phil, Oct 21 '16 at 03:27
Yes..That's what I get angry with: when you try to help by taking your time and effort so that some perfectionist or malicious person is pulling the straw out of your eyes instead of theirs.... — repzero, Oct 21 '16 at 03:30

Ronnie Royston · Answer 3 · 2016-10-22T02:34:58.223

1

ES6 Set.

.getElementsByTagName returns an HTMLCollection which behaves similar to an array so that document.getElementsByTagName('input')[2] references the 3rd input element in the DOM.

If you want to count the unique number of radio input groups (those with same name attribute) simply get the HTMLCollection of all radio inputs then loop over them. Inside the loop, if the name is new .push that name to an array called groups and finally a numberOfGroups.length should give you your number.

var doc = document;
var inputs = doc.getElementsByTagName('input');
var groups = [];

for (var i = 0; i < inputs.length; ++i) {
  groups.push(inputs[i].name)
}

console.log(Array.from(new Set(groups)));
console.log(Array.from(new Set(groups)).length);

<input type="radio" name="fruit">apple</input>
<input type="radio" name="fruit">orange</input>
<input type="radio" name="fruit">grape</input>
<hr>
<input type="radio" name="vegetable">lettuce</input>
<input type="radio" name="vegetable">tomato</input>
<hr>
<input type="radio" name="seasoning">salt</input>
<input type="radio" name="seasoning">pepper</input>

edited Oct 22 '16 at 02:34

answered Oct 21 '16 at 02:40

Ronnie Royston

16,778
6
77
91

I'm not sure how this answers the question – Phil Oct 21 '16 at 02:43
I believe the question has been edited. To get the number of radio inputs per name just see [here](http://stackoverflow.com/questions/7647095/getting-html-elements-by-their-attribute-names). It's been answered several years ago. – Ronnie Royston Oct 21 '16 at 02:51
I edited the title to match the rest of the question but that's about it. I don't see how that other question is the same either – Phil Oct 21 '16 at 02:54
That better? .Set – Ronnie Royston Oct 22 '16 at 02:37
Very nice :) You should also be able to use `new Set(groups).size` instead of creating a new array just for the length. – Phil Oct 24 '16 at 02:27

score -1 · Answer 4 · answered Oct 21 '16 at 02:33

-1

Did you mean something like this?

var a = document.getElementsByTagName('input');
var b = [a.delete1,a.delete2,a.delete3];

answered Oct 21 '16 at 02:33

Jaq L.

10
1

How to count the number of radio button groups (by name attribute)?

4 Answers4