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
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.