Iterating through specific radio groups only, within a larger set of radio groups

Question

I have a form with 26 questions, all of which have radio button groups as an answer choice for the user (it calculates the risk factor for a specific invasive plant species on a given property). At the end, the selected value within each radio group is added up.

What makes it complicated is that the user has the option of filling in the questionnaire for 5 different invasive plant species; in other words, I have 26 rows and 5 columns, and at the end I need to tally up each column separately. I have done this by using getElementsByClassName, and it works like a charm in Firefox, but not in IE. And unfortunately the client I'm doing this for has IE as their user standard. I've tried a number of generic getElementsByClassName functions posted on the web, but they don't seem to work; I get Error on Page all the time.

The function successful in Firefox is like this:

function addSpecies1(frm, resultHolder)
{
var elems = frm.getElementsByClassName('species1'),
calculator = elems.length,
total = 0;
for(var i=0; i<calculator; i++)
if(elems[i].type=='radio' && elems[i].checked  && !isNaN(elems[i].value))
total+=parseFloat(elems[i].value);
resultHolder.value=total;
}

There's probably a very simply answer (I am a rank beginner!) but I've been banging my head against the wall for over a week...

Answer 1

best and easiest thing to do would be to use jquery. it takes care most cross browser issues. you can do a getElementsByClassName using $('.species1').

If you do not want to use jquery you can use the following code snippet

var inputs = document.getElementsByTagName('INPUT');
var inputlen = inputs.length;
var result = new Array();

for(var i=0;i<inputlen;i++)
{
   if( inputs[i].className == 'species1' && input.checked)
      result.push(inputs[i]);
}

result contains all selected checkboxes with class species1. you can also use the loop to get checked ones