Jump to content

saila.com

Online media matters

HTML

Highlight Selected Radio Button

Highlight Selected Radio Button

Highlight Selected Radio Button

Through the use of some simple JavaScript, the label is highlighted when it’s relevant radio button is selected.

Although this script doesn’t work with Netscape 4.x, it can be easily adapted to do so.

The Script

var d = document;

function changeLabel(){ if(d.getElementsByTagName){
  var testForm = d.testForm;
  var inputs = d.testForm.test;
  var labels = testForm.getElementsByTagName("label");
  for(x=0;x<inputs.length;x++){
    if(inputs[x].checked == true) {
      labelObj = labels[x]
      labelObj.style.border = "1px dashed green" // and/or
      labelObj.style.background = "#CCC" // and/or
      labelObj.style.fontWeight = "bold"
    } else {
      labelObj = labels[x]
      labelObj.style.border = "none" // and/or
      labelObj.style.background = "#FFF" // and/or
      labelObj.style.fontWeight = "normal"
    }
  }
}else{return}}