Question

I wonder if you can help me.

I am using the below code and wanted to know if anyone know how to get the function in the JS to work independently on UL’s rather interfering with each other.

Basically when the page loads it calls the JS function which checks the inputs on the form for the checked radio button and applies a specific CSS class to set styles and highlight to it’s parent LI in the HTML mark-up. It also works out from the click event if you choose another option in the radio button list to remove any styles that may have been applied to any LI’s and put the class on the corresponding parent LI of the option you have clicked on

Now the problem lies is that as I am checking it against a form (which houses the UL and children LI’s that contain the radio button list) where there are two different radio button lists which breaks the code as it doesn’t know which UL in the form to apply the code to. It works fine if I only have one UL so really I need the JS to be a bit more ‘cleverer’ and run on the corresponding UL that I have clicked on and not affect the other. I still want it to highlight the checked radio button on both lists on page load though

Would greatly appreciate any help.

HTML:

<form id="myForm">
   <ul id="activityChoices" class="radioList">
      <li class="radio-item">
          <input type="radio" id="radio1" name="radio" value="radio1">
          <label for="radio1">radio1</label>
      </li>
      <li class="radio-item">
          <input type="radio" id="radio2" name="radio" value="radio2">
          <label for="radio2">radio2</label>
      </li>
      <li class="radio-item">
          <input type="radio" id="radio3" name="radio" value="radio3" checked="checked">
          <label for="radio3" >radio3</label>
      </li>
      <li class="radio-item">
          <input type="radio" id="radio4" name="radio" value="radio4">
          <label for="radio4" >radio4</label>
      </li>
  </ul>
  <ul>
      <li>
          <input type="radio" id="yes" name="answer" value="yes">
          <label for="yes">yes</label>
      </li>
      <li>
          <input type="radio" id="no" name="answer" value="no">
          <label for="no">no</label>
      </li>
  </ul>
</form>
<script type="text/javascript">
    highlightSelectedRadio('myForm','input');
</script>

JS:

function highlightSelectedRadio(myForm, tag) 
{
  var form = document.getElementById(myForm);
  var inputArray = form.getElementsByTagName(tag);
  var prevClass = null;

  for (i=0;i<inputArray.length;i++) {
    if(inputArray[i].checked) {
      prevClass = inputArray[i].parentNode.getAttribute("class");
      inputArray[i].parentNode.className += " myclass";
    }   
  }

  var myArray = form.getElementsByClassName("myclass");
  form.onclick = function() {
    for (j=0;j<myArray.length;j++) {
      myArray[j].className = prevClass;
    }
    inputArray = this.getElementsByTagName(tag);

    for (i=0;i<inputArray.length;i++) {
      if(inputArray[i].checked) {
        inputArray[i].parentNode.className += " myclass";
      }   
    }
  }
}

Answer 1

If I understood your question correctly, I think this is what you need:

function highlightSelectedRadio(myForm, tag) 
{
    var form = document.getElementById(myForm);
    var radios = form.getElementsByTagName(tag);

    for (var i=0, l = radios.length;i < l; i++) {
        if (radios[i].checked) {
            addClass(radios[i].parentNode, 'myclass');
        }
    }

    form.onclick = function() {
        for (var i = 0, l = radios.length; i < l; i++) {
            if (radios[i].checked) {
                addClass(radios[i].parentNode, 'myclass');
            } else {
                removeClass(radios[i].parentNode, 'myclass');
            }
        }
    };
}

function addClass(el, c) {
    if (el.className.indexOf(c) === -1) {
        el.className += ' myclass';
    }
}
function removeClass(el, c) {
    var re = new RegExp(' ?' + c + ' ?');
    el.className = el.className.replace(re, '');
}