radio button+class change

Discussion in 'JavaScript' started by vetrivel, Jul 15, 2009.

0
  1. #1
    Hi,
    i have a div which contain radio button which will be generated by loop .
    Now what i need is to chnage the particular div class when a radio button inside that div is checked.

    EX:
    for($i=0;$i<5;$i++){
    <div id="divid" class="default">
    <input type="radio" name="iamradiobutton" id="iamradiobutton_$i" value="">
    </div>
    }

    This is simple example for what i am trying.
    Now it will generate 5 div and each div have a radio button.
    What i am trying is ,
    if someone select the first radio button i need to change its class(default) to "secondclass" and then if they select the another radio button then i need to change the coressponding div of that radio button and PREVIOUSLY selected to DEFAULT class.

    Please help me.I can able to change the classname using JS,But i dont know how to change the PREVIOUSLY selected radio button class.
     
    vetrivel, Jul 15, 2009 IP
  2. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #2
    Here is a code that doent need to invoke the radio.
    The radio button class is somewhat difficult to use.
    But if you want a solution containing radio, do post here.

    <html>

<title></title>

<head>

<style type="text/css">

        .default
	{
		height:30px;
		background-color: #eeeeee;			
		width:200px;
		border:1px solid #666666;
	}

	.newDefault
	{
		height:30px;
		background-color: #aaaaaa;			
		width:200px;
		border:1px solid #aa0000;
	}
	
</style>


<script language="javascript" type="text/javascript">

function changeStyle(num)
{
    for(var i=1; i<10; i++)
    {
       document.getElementById('div'+i).className="default";
    }
    document.getElementById('div'+num).className="newDefault";
}

</script>

</head>

<body>

<form>

<script type="text/javascript"> 

for(var i=1; i<10; i++)
{
   document.write("<div id='div"+i+"' class='default'><input type='radio' name='radiobutton' id='radiobutton"+i+"' value='' onClick='changeStyle("+i+");'> Radio"+i+"</div>");
}

</script>

</form>

</body>

</html>
    Code (markup):
    Hope this helps,
     
    Unni krishnan, Jul 16, 2009 IP