PDA

View Full Version : onClick Radio Box

lydiachin
09-11-2002, 11:14 AM
Hi! I wish to change the Radio box color while it get checked. By the code below, it will change the color of the text beside the Radio box. But the problem is, even though it unchecked or select another radio box, the Radio been checked will remind the changed color. What wrong with the script, and how to change the changedcolor back to the original color while it been unchecked??? :confused: :confused: :confused:


<script>
function colorChange(node, chk) {
if (chk)
node.style.color = 'red';
else
node.style.color = 'black';
}
</script>


<span><input type="radio" name="radiobutton1" value="radiobutton2" onClick="colorChange(this.parentNode, this.checked)">Text to change color</span>

<span><input type="radio" name="radiobutton2" value="radiobutton2" onClick="colorChange(this.parentNode, this.checked)">Text to change color</span>

<span><input type="radio" name="radiobutton3" value="radiobutton2" onClick="colorChange(this.parentNode, this.checked)">Text to change color</span>
Zvona
09-11-2002, 01:32 PM
A radiobox example, where green/red ball is indicating whether any of the options are checked. Includes 2 functions (zCheck(), zChange()), which should be easy to implement for your own purposes. Hope this helps, at least a bit.

Example is in Finnish, but I think you'll figure it out :
http://www24.brinkster.com/zvona/radioCheck.html
adios
09-14-2002, 02:53 AM
Might try this:

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function colorChange(el) {
var radgroup = document.getElementsByName(el.name);
for (var r=0; radgroup[r]; ++r)
radgroup[r].parentNode.style.color = radgroup[r].checked ? 'red' : 'black';
}

</script>
</head>
<body>
<form>
<span>
<input type="radio" name="radiobutton" value="radiobutton2" onClick="colorChange(this)">
Text to change color
</span><br>
<span>
<input type="radio" name="radiobutton" value="radiobutton2" onClick="colorChange(this)">
<span>Text to change color
</span><br>
<span>
<input type="radio" name="radiobutton" value="radiobutton2" onClick="colorChange(this)">
<span>Text to change color
</span>
</form>
</body>
</html>
zoobie
09-14-2002, 09:42 AM
How about changing the color of the radio button itself? :D
kash007
10-20-2009, 04:00 PM
Please help to change text & selcted radio box color,

my code is,
<td width="941" align="left"><span class="style9" > Able to apply relevant engineering knowledge, principles, tools, processes, techniques, and best practices in an integrated manner to design and construct real architectural engineering projects with emphasis on the specific needs of the UAE society.</span></td>
<td width="25"><br>
<div align="center">
<input type="radio" value="1" name="ques_1_1" >
</div>
<div align="center"></div></td>

thanks in advance.

Kash

Might try this:

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function colorChange(el) {
var radgroup = document.getElementsByName(el.name);
for (var r=0; radgroup[r]; ++r)
radgroup[r].parentNode.style.color = radgroup[r].checked ? 'red' : 'black';
}

</script>
</head>
<body>
<form>
<span>
<input type="radio" name="radiobutton" value="radiobutton2" onClick="colorChange(this)">
Text to change color
</span><br>
<span>
<input type="radio" name="radiobutton" value="radiobutton2" onClick="colorChange(this)">
<span>Text to change color
</span><br>
<span>
<input type="radio" name="radiobutton" value="radiobutton2" onClick="colorChange(this)">
<span>Text to change color
</span>
</form>
</body>
</html>