Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onClick Radio Box

    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???


    <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>

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    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
    Zvona
    First Aid for
    Web Design

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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>

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts
    How about changing the color of the radio button itself?
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Radio box text & color

    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

    Quote Originally Posted by adios View Post
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •