You are viewing limited content. For full access, please sign in.

Question

Question

Radio Buttons- Change color based on selection

Forms
Updated February 7, 2017
asked on February 6, 2017

I have a series of questions using radio buttons which consist of "OK" ,"Needed" and Not Applicable".   I would like to change the color of the text based on which radio button is selected.

 

I would like the following:  change the color of "Ok" to green if it is selected,  red if "Needed" is selected, and leave "Not Applicable" in black.

I know how to use CSS to change the color of the text but not 3 different colors based on what radio button is actually selected. I am guessing I need to use Javascript here to enforce the logic.

Radio buttons.JPG
Radio buttons.JPG (17.17 KB)
Download
0 0

Answer

SELECTED ANSWER
replied on February 6, 2017 • Show version history

Hello,

Here is what you can do to update colors for options.

$(document).ready(function() {
  $('#q27').on('click', function(e) {
    if (e.target.value == 'OK') {
    	$('#q27 span label').css('color', 'green');
    }
    else if (e.target.value == 'Needed') {
    	$('#q27 span label').css('color', 'red');
    }
    else if (e.target.value == 'Not Applicable') {
    	$('#q27 span label').css('color', 'black');
    }
  });
});
0 0

Replies

replied on February 6, 2017

Hello,

If you want to use javascript to do color change, you can do like

$(document).ready(function() {
  $('#q1').on('click', function(e) {
    if (e.target.value == 'choice 1') {
    	$('#q1 .cf-label').css('color', 'green');
    }
    else if (e.target.value == 'choice 2') {
    	$('#q1 .cf-label').css('color', 'red');
    }
    else if (e.target.value == 'choice 3') {
    	$('#q1 .cf-label').css('color', 'black');
    }
  });
});

where target element id ('#q1') and colors might need to be updated based on your field configuration and preference.

0 0
View 4 previous replies
replied on February 6, 2017

Thank you for your reply Yoonsang. I inserted the code into the Javascript section of the "CSS and Javascript" tab and replaced  #q1 with #q27 which was the radiator question ID from my uploaded image. 

 

I saved and yet when trying to preview or actually run the form there doesn't seem to be any color change when clicking on the radio buttons. "Ok" doesnt turn green and "Needed" not turning red etc..  Is there something else I also need to do to get this working? Something I may have missed?

 

Thanks again.

0 0
replied on February 6, 2017

Hello,

Did you also change the e.target.values? like 'choice 1' to 'Ok',  'choice 2' to 'Needed', and 'choice 3' to be the last option in your check box.

0 0
replied on February 6, 2017

Oh and which labels do you want to get color changed? 

0 0
replied on February 6, 2017

For the first question that was my mistake, after changing them to "ok" "needed" etc.. that worked.

 

I was looking to have the word "OK", "Needed" and "Not Applicable" change to green, red and black.   Is that possible? You have been a big help!

0 0
SELECTED ANSWER
replied on February 6, 2017 • Show version history

Hello,

Here is what you can do to update colors for options.

$(document).ready(function() {
  $('#q27').on('click', function(e) {
    if (e.target.value == 'OK') {
    	$('#q27 span label').css('color', 'green');
    }
    else if (e.target.value == 'Needed') {
    	$('#q27 span label').css('color', 'red');
    }
    else if (e.target.value == 'Not Applicable') {
    	$('#q27 span label').css('color', 'black');
    }
  });
});
0 0
replied on February 6, 2017

If you search for more colors at http://www.color-hex.com/, and update 'green', 'red', and 'black' to the color hex codes from that website, colors of labels will be updated to those colors.

like, 'green' to '#035302' (darker green)

0 0
replied on February 7, 2017

Awesome thanks for all your help!!

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...