Radio gets Colored

[Total: 0    Average: 0/5]

This script shows how to change the style class name to alter its colors.

Head Code:

<style>
.s0 { color: red;    background-color: gold;   }
.s1 { color: gold;   background-color: red;    }
.t0 { color: blue;   background-color: purple; }
.t1 { color: purple; background-color: blue;   }
.s  { color: orange; background-color: silver; }
.t  { color: orange; background-color: silver; }
</style>

Body Code:

This will toggle the style class for the given form radio button selected.<BR>
<form name=f1>
<span id=i0 class=s0>R0 <input id=j0 class=t0 type=radio name=r1 value="0" onclick="doIt(this.form,0)"></span><BR>
<span id=i1 class=s1>R1 <input id=j1 class=t1 type=radio name=r1 value="1" onclick="doIt(this.form,1)"></span><BR>
</form>
<script>
function doIt(_f,_i)
{
  if(!document.getElementById)return; /* this example only for DOM browsers */
  document.getElementById("i"+_i).className="s";
  document.getElementById("j"+_i).className="t";
  _i=(_i+1)%2; /* if 1 make 0 : if 0 make 1 */
  document.getElementById("i"+_i).className="s"+_i;
  document.getElementById("j"+_i).className="t"+_i;
}
</script>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *