change label individual radio buttons

asked on January 30, 2019

I have a form with many radio buttons and each radio button values are the same...

Question 1

Options Yes, No, N/A

Question 2

Options Yes, No, N/A

etc.

I would like to change the color of the label background for each question independently...

This is what I have:

$(document).ready(function() {
$('#q5').on('click', function(e) {
if (e.target.value == 'Yes') {
   $('#q5 span label').css('background-color', '#58F952');
}
else if (e.target.value == 'No') {
   $('#q5 span label').css('background-color', '#FB5944');
}
else if (e.target.value == 'N/A') {
   $('#q5 span label').css('background-color', '#44AEFB');
}
});
});

How do I write this with the "this" statement so it only works for every radio button that I have set with css class .radio?

Capture.PNG (55.61 KB)

| Download

0 0

replied on January 30, 2019 • Show version history

Hi Katy,

Try this: (no pun intended! )

$(document).ready(function() {
  $('.radio').on('click', function(e) {
    if (e.target.value == 'Yes') {
        $(this).css('background-color', '#58F952');
    }
    else if (e.target.value == 'No') {
        $(this).css('background-color', '#FB5944');
    }
    else if (e.target.value == 'N/A') {
        $(this).css('background-color', '#44AEFB');
    }
  });
});

0 0

View 2 previous replies

replied on January 30, 2019

It doesn't work. It's like I need that span label in there, but not sure how to get it in there with the (this) in there.

0 0

SELECTED ANSWER

replied on January 30, 2019

Ahh .... missed that.

Try using this for the css update:
$(this).find("span label").css('background-color', '#58F952');

I think that will do what you want.

~ Andrew

1 0

replied on February 1, 2019

THANK YOU!

0 0

replied on February 13, 2019

OK, so now... how can I only highlight, with the background color, the checked radio button:

Here's my code:

$(document).ready(function() {
$('.radio').on('click', function(e) {
if (e.target.value == 'Yes') {

$(this).find("span label").css('background-color', '#58F952');
}
else if (e.target.value == 'No') {
   $(this).find("span label").css('background-color', '#FB5944');
}
else if (e.target.value == 'NA') {
   $(this).find("span label").css('background-color', '#FFFF89');
}
else if (e.target.value !== 'Yes' || e.target.value !== 'No' || e.target.value !== 'N/A') {
   $(this).find("span label").css('background-color', '#FCFCFC');
}
});
});

And attached is my output.

Radio Buttons Background.PNG (18.56 KB)

| Download

0 0

replied on February 15, 2019

I figured it out!

.sidebyside {display: inline-block;
  width: 50%;}

input[type=radio]:checked ~ label{
  color: #000000 !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

input[type="radio"]:not(:checked) ~ label {
  height: 10px !important;
  width: 10px !important;
  background-color: #FCFCFC !important;
    /*width: 50%;*/
  }

$(document).ready(function() {
  $('.radio').on('click', function(e) {
    if (e.target.value == 'Yes') {
    	
      $(this).find(":checked ~ label").css('background-color', 'green');
    }
    else if (e.target.value == 'No') {
      $(this).find(":checked ~ label").css('background-color', '#FB5944');
    }
    else if (e.target.value == 'NA') {
    	$(this).find(":checked ~ label").css('background-color', '#FFFF89');
    }
    else if (e.target.value !== 'Yes' || e.target.value !== 'No' || e.target.value !== 'N/A') {
    	$(this).find(":checked ~ label").css('background-color', '#FCFCFC');
    }
  });
});

Working Radio Buttons.PNG (14.65 KB)

| Download

0 0

Question

Question

change label individual radio buttons

Answer

Replies

Sign in to reply to this post.