Changing radio button background on selected according to it value

Question

OBJECTIVE

Trying to change the background color of a radio input that's been styled like a button so that when the user clicks on it, the color will change according to the radio value.

EXPECTED RESULT

When click button "NEUTRAL", change button background color to white.
When click button "GOOD", change button background color to green.
When click button "WATCHLIST", change button background to yellow.
When click button "UNDER MONOTORING", change button background to red.

PROBLEM

It doesn't change the background of the button accordingly, which is what I'm trying to do.

Appreciate some help here. Thank in advance.

$(document).ready(function() {
  $('label').click(function() {
    if ($("input:radio[name='category']:checked").val() == 'W') {
      $(this).addClass('whiteBG');
    }
    if ($("input:radio[name='category']:checked").val() == 'G') {
      $(this).addClass('greenBG');
    }
    if ($("input:radio[name='category']:checked").val() == 'Y') {
      $(this).addClass('yellowBG');
    }
    if ($("input:radio[name='category']:checked").val() == 'R') {
      $(this).addClass('redBG');
    }
  });
});

input[type=radio],
input[type=checkbox] {
  display: none;
}

label {
  display: block;
  appearance: button;
  -webkit-appearance: button;
  -moz-appearance: button;
  -ms-appearance: button;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: #DDDDDD;
  font-size: 1.6rem;
  color: #111111;
  border: 2px solid #AAAAAA;
  padding: 8px;
  width: 40%;
  margin: 0 auto;
  text-align: center;
  transition: all 0.7s ease-in-out;
}

.whiteBG {
  background-color: #FFF000;
}

.greenBG {
  background-color: #0F0000;
}

.yellowBG {
  background-color: #FF0000;
}

.redBG {
  background-color: #F00000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset data-role="controlgroup">
    <legend>PERSON CATEGORY SELECTION</legend>
    <label for="neutral">
              <input type="radio" class="button" id="neutral" name="category" value="W" >NEUTRAL</input>
          </label>
    <label for="good">
              <input type="radio" class="button" id="good" name="category" value="G">GOOD</input>
          </label>
    <label for="watchlist">
              <input type="radio" class="button" id="watchlist" name="category" value="Y">WATCHLIST</input>
          </label>
    <label for="monitor">
              <input type="radio" class="button" id="monitor	" name="category" value="R">UNDER MONOTORING</input>
          </label>
  </fieldset>
</form>

Answer 1

In order to make your background-color show up, you should set appearance properties on label to none instead of button.

label {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

You should remove all CSS classes from your button on click before you set the new CSS class.

Answer 2

Problems in your code:

• The # colour codes that you had in your CSS didn't reflect the colours you were trying to assign. These hex codes need to be either abbreviated three-digit RGB values or six-digit RGB values with two digits per colour, i.e., either #RGB or #RRGGBB, but it was like you mixed the two options by adding "000" to the end of what would otherwise be the right three-digit hex codes for the colours you wanted. Either remove the trailing 000 from each one, or change to the correct six-digit hex codes.
• You didn't have any code to remove the class from a button when the other buttons are clicked.

Your JS code seems overly complicated. I would bind the click handler to the radio buttons themselves, because then this.value will give you the value of the button just clicked, thus simplifying your if conditions a lot. You can use $(this).parent() to then get to the label element to style it.

I've introduced a variable called buttons that is the jQuery object containing all of the buttons, because then inside the handler you can say buttons.not(this).parent() to get a jQuery object containing all of the other buttons' parent label elements and remove the colour class from them to make them grey again.

$(document).ready(function() {
  var buttons = $("input:radio[name='category']").click(function() {
    buttons.not(this).parent().removeClass('whiteBG greenBG yellowBG redBG');
    var label = $(this).parent();
    if (this.value == 'W') {
      label.addClass('whiteBG');
    } else if (this.value == 'G') {
      label.addClass('greenBG');
    } else if (this.value == 'Y') {
      label.addClass('yellowBG');
    } else if (this.value == 'R') {
      label.addClass('redBG');
    }
  });
});

input[type=radio], input[type=checkbox] { display: none; }

label {
  display: block;
  appearance: button; -webkit-appearance: button; -moz-appearance: button; -ms-appearance: button;
  font-family: 'Roboto', sans-serif; font-weight: 400;
  background: #DDDDDD;
  font-size: 1.6rem;
  color: #111111;
  border: 2px solid #AAAAAA;
  padding: 8px;
  width: 40%;
  margin: 0 auto;
  text-align: center;
  transition: all 0.7s ease-in-out;
}

.whiteBG { background-color: #FFF; }

.greenBG { background-color: #0F0; }

.yellowBG { background-color: #FF0; }

.redBG { background-color: #F00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <fieldset data-role="controlgroup">
    <legend>PERSON CATEGORY SELECTION</legend>
    <label for="neutral">
        <input type="radio" class="button" id="neutral" name="category" value="W" >NEUTRAL</input>
    </label>
    <label for="good">
         <input type="radio" class="button" id="good" name="category" value="G">GOOD</input>
    </label>
    <label for="watchlist">
         <input type="radio" class="button" id="watchlist" name="category" value="Y">WATCHLIST</input>
    </label>
    <label for="monitor">
         <input type="radio" class="button" id="monitor" name="category" value="R">UNDER MONOTORING</input>
    </label>
  </fieldset>
</form>