Member Avatar for MidiMagic

OK, I know how to address all of the radio buttons on a page as an array, and address all of the radio buttons in a single group as an array. And I know how to create multidimensional objects in JavaScript.

But how can I create a two-dimensional array of radio buttons and address it in JavaScript?

Let's do a simple set of four groups of radio buttons, each with three selections (the actual set I want to use is much larger, but I can scale up the solution). Each group can have only one selection.

Group 1:  O A  O B  O C
Group 2:  O A  O B  O C
Group 3:  O A  O B  O C
Group 4:  O A  O B  O C

I want to use for loops to count the number of A selections, the number of B selections, and the number of C selections. I also want to look for diagonal lines of three checked buttons.

What I can't figure out is how to name the button groups in the HTML code so I can address all of them in the loops, yet keep them separate for the purpose of having one radio button selection in each group.

I don't want to use the global array of radio buttons on the page, because the number of buttons above this structure in the webpage will vary. I also want to address them in x-y notation.

  • 1 Contributor
  • 2 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

your array-of-groups approach works. If you want x-y addressing without hardcoding, give each row its own radio group via name (e.g., r0, r1, r2, r3) and set each radio’s value to A, B, or C. Then build a 2D array from the DOM once and use it for counting and diagonal checks.

// HTML assumption: <form id="vote"> with radios named r0..rN, values A/B/C
const form = document.getElementById('vote');

// derive rows by unique group names
const groupNames = [...new Set([...form.querySelectorAll('input[type=radio]')].map(r => r.name))];

// grid[y][x] -> radio element at row y, column x (A=0, B=1, C=2)
const grid = groupNames.map(name => [...form.elements[name]]);

// count A/B/C across all rows
function countSelections() {
  const counts = { A: 0, B: 0, C: 0 };
  grid.forEach(row => {
    const checked = row.find(r => r.checked);
    if (checked) counts[checked.value]++;
  });
  return counts;
}

// detect any diagonal of length 3 (works with 4x3 or larger Nx3)
function hasDiagonal3() {
  const cols = grid.map(row => row.findIndex(r => r.checked)); // 0..2 or -1
  for (let i = 0; i <= cols.length - 3; i++) {
    const [a, b, c] = [cols[i], cols[i+1], cols[i+2]];
    if (a < 0 || b < 0 || c < 0) continue;
    if ((b === a + 1 && c === b + 1) || (b === a - 1 && c === b - 1)) return true;
  }
  return false;
}

Tips:

  • This keeps mutual exclusivity per row via name while letting you access by grid[y][x].
  • For larger grids, add data-x and data-y to each radio if you prefer explicit coordinates.
  • Accessibility: keep groups in fieldset with a legend, pair inputs with <label for=...> to make the UI usable by keyboard and screen readers.
Member Avatar for MidiMagic

Nobody knows this?

Also tell me if you don't see any way to do it.

Member Avatar for MidiMagic

I solved it myself.

You build an array of objects, then index that.

<html>
<head>
<title>Try out the radio</title>

<style type="text/css">
<!--

.cenx {text-align: center;}
.wfd {width: 100%}

img {padding: 24pt;}
body {background-color: #cccccc; padding: 2%; font-family: Arial, sans-serif;}

-->
</style>

<script type="text/javascript">

function sumitup(){
 var xax = [document.forms.vote.appr1c, document.forms.vote.appr2c, document.forms.vote.appr3c, document.forms.vote.appr4c];
 var sum, grp, x, y;
 var acc = Array(3);

 sum = 0;
 for(x = 0; x < 3; x++){
  acc[x] = 0;
  for(y = 0; y < xax.length; y++){
   grp = xax[y];
   if(grp[x].checked){
    sum = sum + 1;
    acc[x] = acc[x] + 1;
   };
  };
 };
 alert('A: ' + acc[0] + ', B: ' + acc[1] + ', C: ' + acc[2] + ', TOTAL: ' + sum);
};

</script>

</head>
<body>

<form name="vote" id="vote" action="none">
 <p><fieldset>
  <legend>Block 1</legend>
  <input type="radio" name="appr1c" value="yes" />A
  <input type="radio" name="appr1c" value="yes" />B
  <input type="radio" name="appr1c" value="yes" />C
 </fieldset></p>

 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr2c" value="yes" />A
  <input type="radio" name="appr2c" value="yes" />B
  <input type="radio" name="appr2c" value="yes" />C
 </fieldset></p>

 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr3c" value="yes" />A
  <input type="radio" name="appr3c" value="yes" />B
  <input type="radio" name="appr3c" value="yes" />C
 </fieldset></p>

 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr4c" value="yes" />A
  <input type="radio" name="appr4c" value="yes" />B
  <input type="radio" name="appr4c" value="yes" />C
 </fieldset></p>

 <input type="button" id="startx" name="startx" value="GO" onclick="javascript:sumitup()" />
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.