Radio button highlighting

Question

Here is my current code:

<label>
  <input type="radio" id="nosupp" name="nosupp">
    No Supplier Chosen
</label><br/><br/>

<cfloop query="supplier">
  <label>
    <input type="radio" id="chk1" name="chooseSupp" onchange="change(this);">
      Chosen Supplier
  </label>
</cfloop>

Javascript:

<script type="text/javascript">
  function change(obj) {
    var tr=obj.parentNode.parentNode;
    var tbl = tr.parentNode.parentNode;
    var inputs = tbl.getElementsByTagName("input");
    for(var i = 0;i<inputs.length;i++)
      inputs[i].parentNode.parentNode.style.backgroundColor='transparent';
      tr.style.backgroundColor=(obj.checked)? 'red' : 'transparent';
  }
</script>

What this does is, highlights each of the radio buttons in the loop whenever they are clicked on.

My problem is, when I click on the radio button outside the loop (nosupp), the highlighting on the last one checked in the loop does not go away.

I don't want any highlighting on the nosupp one or when the nosupp one is chosen.

Any ideas?

Answer 1

Do it like this (I assume that your nosupp and supp are in the same parent table or else modify this code according to your need):

<input type="radio" id="nosupp" name="nosupp" onchange="resetSupp(this);">

<script type="text/javascript">
function resetSupp(obj) {
var tr=obj.parentNode.parentNode;
var tbl = tr.parentNode.parentNode;
var inputs = tbl.getElementsByTagName("input");
for(var i = 0;i<inputs.length;i++)
  inputs[i].parentNode.parentNode.style.backgroundColor='transparent';
  tr.style.backgroundColor= 'transparent';
}
</script>