Graphical StopLight Radio Selection

[Total: 0    Average: 0/5]

This will enable you to show the selected radio button with graphics.

Head Code:

<style>
.clr0
 {
  background-color: #FFF;
 }
.clr1
 {
  background-color: #8F8;
 }
</style>
<script>
// for first method - style is for first method
function doIt()
{
  var _sel=-1;
  for(var i=0;i<document.f1.rd1.length;i++)
  {
    if(document.f1.rd1[i].checked)_sel=i;
  }
  if(_sel==0)
  {
    document.getElementById("r1").className="clr1";
    document.getElementById("r2").className="clr0";
  }
  else if(_sel==1)
  {
    document.getElementById("r1").className="clr0";
    document.getElementById("r2").className="clr1";
  }
  else
  {
    document.getElementById("r1").className="clr0";
    document.getElementById("r2").className="clr0";
  }

  var _sel=-1;
  for(var i=0;i<document.f1.rd2.length;i++)
  {
    if(document.f1.rd2[i].checked)_sel=i;
  }
  if(_sel==0)
  {
    document.getElementById("r3").className="clr1";
    document.getElementById("r4").className="clr0";
    document.getElementById("r5").className="clr0";
  }
  else if(_sel==1)
  {
    document.getElementById("r3").className="clr0";
    document.getElementById("r4").className="clr1";
    document.getElementById("r5").className="clr0";
  }
  else if(_sel==2)
  {
    document.getElementById("r3").className="clr0";
    document.getElementById("r4").className="clr0";
    document.getElementById("r5").className="clr1";
  }
  else 
  {
    document.getElementById("r3").className="clr0";
    document.getElementById("r4").className="clr0";
    document.getElementById("r5").className="clr0";
  }
}
</script>



<script>
// for 2nd method
var IMG=new Array();
IMG[false]=new Image();IMG[false].src="http://www.js-examples.com/images/blue_ball0.gif";
IMG[true]=new Image(); IMG[true].src ="http://www.js-examples.com/images/red_ball0.gif";
// _i== which img to swap
// _v== value to store
function doThis(_i,_v)
{
  var A=new Array("img1","img2","img3");
  var _o=document.f1.rd3;
  if(_v!=_o.value) // not same one already selected
  {
    document.img1.src=IMG[_i==1].src;
    document.img2.src=IMG[_i==2].src;
    document.img3.src=IMG[_i==3].src;
    _o.value=_v;
  }
}
</script>

Body Code:

<form name=f1>
<!-- first method -->
1-A<span class=clr0 id=r1><input type=radio name=rd1 value="A" onclick="doIt()"></span><BR>
1-B<span class=clr0 id=r2><input type=radio name=rd1 value="B" onclick="doIt()"></span><BR>
<BR>
2-A<span class=clr0 id=r3><input type=radio name=rd2 value="A" onclick="doIt()"></span><BR>
2-B<span class=clr0 id=r4><input type=radio name=rd2 value="B" onclick="doIt()"></span><BR>
2-C<span class=clr0 id=r5><input type=radio name=rd2 value="C" onclick="doIt()"></span><BR>
<BR>
<!-- second method -->
<input type=hidden name=rd3 value="1">
3-A<a href="javascript:doThis(1,'1A')"><img border=0 height=20 src="http://www.js-examples.com/images/blue_ball0.gif" name=img1></a><BR>
3-B<a href="javascript:doThis(2,'2B')"><img border=0 height=20 src="http://www.js-examples.com/images/blue_ball0.gif" name=img2></a><BR>
3-C<a href="javascript:doThis(3,'3C')"><img border=0 height=20 src="http://www.js-examples.com/images/blue_ball0.gif" name=img3></a><BR>
</form>

Times Viewed: 0

Leave a Reply

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