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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Clicking Radio Button Highlights Corresponding Label Text

    I have 2 radio buttons on a form, with text next to each of them. I'd like the text for either radio button to be highlighted (yellow background, maybe) when the corresponding radio button is clicked on so the user can have more feedback as to which button is selected. Is this possible?

  • #2
    JUD
    JUD is offline
    New Coder
    Join Date
    Jul 2005
    Location
    I'm right here
    Posts
    92
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    	// <![CDATA[
    		function highlight(frm){
    			var inputs = frm.getElementsByTagName('INPUT');
    			
    			for(var i = 0; i < inputs.length; i++){
    				if(inputs[i].type == 'radio'){
    					inputs[i].nextSibling.style.backgroundColor = (inputs[i].checked) ? 'yellow' : 'white';
    				}
    			}
    		}
    	// ]]>
    </script>
    </head>
    
    <body>
    <form>
    <input name="radioBtn" type="radio" id="button1" onclick="highlight(this.form)" /><label for="button1">Radio Button 1</label><br />
    <input name="radioBtn" type="radio" id="button2" onclick="highlight(this.form)" /><label for="button2">Radio Button 2</label>
    </form>
    </body>
    </html>

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    More efficient solution by looping through all the target radio button group only and not all input elements.
    Code:
    function highlight(objRad){
      var radGrp = objRad.form.elements[objRad.name];
      for (var i=0; i<radGrp.length; i++){
         radGrp[i].nextSibling.style.backgroundColor = (radGrp[i].checked) ? 'yellow' : 'white';
      }
    }
    ...
    <form>
    <input name="radioBtn" type="radio" id="button1" onclick="highlight(this)" /><label for="button1">Radio Button 1</label><br />
    <input name="radioBtn" type="radio" id="button2" onclick="highlight(this)" /><label for="button2">Radio Button 2</label>
    </form>

  • #4
    New Coder
    Join Date
    Feb 2006
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Many thanks for the help from both of you.

    Steve


  •  

    Posting Permissions

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