Changing color of HTML element using radio button

Question

I have 10 groups of radio button with two options, each group separated by a <div>.

<div id = "radio1">
    <p>Do you like to walk?</p>
    <input type="radio" value="a" name="radgrp1"/> Yes <br />
    <input type="radio" value="b" name="radgrp1"/> No <br /> 
</div>

<div id = "radio2">
    <p>Would you prefer to walk without effort?</p>
    <input type="radio" value="a" name="radgrp2"/> Yes <br />
    <input type="radio" value="b" name="radgrp2"/> No <br /> 
</div>

Then I have 10 tags that point to each group.

 <a id ="a1" href="#radio1">Goto 1</a>
 <a id ="a1" href="#radio2">Goto 2</a>

What I am looking to achieve is the moment a user clicks on "Yes" option, color of respective tag ie Goto 1, Goto 2 etc turns green.

I've noticed you've mentioned IE6 a couple times. First, my condolences. Second, WHYYYYYY. Third, your best bet is to either (1) Drop that functionality on IE6 or (2) Actually take a look at why it's breaking in IE6 and debug it yourself. I don't know anybody who is willing (or even able) to test on IE6 right now. — Ryan Kinal
– Ryan Kinal, Commented Nov 18, 2013 at 17:28

The Alpha · Accepted Answer · 2013-11-18 19:15:47Z

2

You may try this (assumed there is no document.body.onclick event handler other than this)

var radios = document.querySelectorAll('input[name^=radgrp]');
document.body.onclick = function(e){
    var evt = e || window.event, target = evt.target || evt.srcElement;
    if(target.name) {
        var prefix = target.name.substr(0, 6), suffix = target.name.substr(6);
        if(prefix && prefix == 'radgrp') {
            if(target.value == 'a' ) {
                document.getElementById('a' + suffix).style.color = 'green';
            }
            else {
                document.getElementById('a' + suffix).style.color = '';
            }
        }
    }
};

Put this code just before the closing </body> tag between <script> tags like

<script type='text/javascript'> // code goes here </script>

Also, you may check this for registering events using different approaches.

Update :

querySelectorAll won't work in IE-6 so you may try this alternative solution for IE-6 to work. Also, if you use jQuery (put the code in <head> between <script>), you may use this example and in case of jQuery, you have to add jQuery script in your <head> section section first.

edited Nov 18, 2013 at 19:15

answered Nov 18, 2013 at 6:15

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

swapna Over a year ago

Thanks it worked but not in IE6, and I need to make it work in Internet Explorer 6. Is there a workaround to make it work in IE 6, :D thanks

swapna Over a year ago

This is the best answer so far.

Sam · Accepted Answer · 2013-11-18 05:34:40Z

2

A common technique is to create a relationship between elements by using data attributes. In your case, you could put an attribute on each input/radio button that references the id of the element you want to affect.

<input type="radio" value="a" name="radgrp1" data-target="a1" /> Yes <br />

Then using some jQuery you could do this:

$('input[type="radio"]').change(function(){
    var id = $(this).attr('data-target');
    $('#' + id).css('background-color', 'rgb(255, 255, 255)');
});

answered Nov 18, 2013 at 5:34

Sam

2,2112 gold badges21 silver badges28 bronze badges

3 Comments

Sterling Archer Over a year ago

Usually unless it's tagged as jQuery, you'll be downvoted for posting a jQuery answer.

swapna Over a year ago

Will it work in IE6, wud u pls you show a small example. thanks.

Benjamin Gruenbaum Over a year ago

@RUJordan while I usually hate to see jQuery answers needlessly - in this case when OP has to support IE6 - jQuery makes sense :/

Collectives™ on Stack Overflow

Changing color of HTML element using radio button

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related