根据其值更改选定的单选按钮背景

Question

目标

尝试更改样式为按钮的单选输入的背景颜色，以便当用户单击它时，颜色将根据单选值更改。

预期结果

当点击“NEUTRAL”按钮时，将按钮背景颜色更改为白色。
单击“GOOD”按钮时，将按钮背景颜色更改为绿色。
单击“WATCHLIST”按钮时，将按钮背景更改为黄色。
当单击“UNDER MONOTORING”按钮时，将按钮背景更改为红色。

问题

它不会相应地改变按钮的背景，这是我想要做的。

在这里感谢一些帮助。提前致谢。

$(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

代码中的问题：

• CSS 中的# 颜色代码没有反映您尝试分配的颜色。这些十六进制代码需要是缩写的三位 RGB 值或六位 RGB 值，每种颜色有两位，即#RGB 或#RRGGBB，但就像您通过添加“000”来混合这两个选项到你想要的颜色的正确三位十六进制代码的末尾。删除每一个末尾的 000，或更改为正确的六位十六进制代码。
• 当单击其他按钮时，您没有任何代码可以从按钮中删除该类。

您的 JS 代码似乎过于复杂。我会将点击处理程序绑定到单选按钮本身，因为 this.value 会给您刚刚单击的按钮的值，从而大大简化了您的 if 条件。您可以使用$(this).parent() 来获取标签元素以设置样式。

我引入了一个名为 buttons 的变量，它是包含所有按钮的 jQuery 对象，因为在处理程序中你可以说 buttons.not(this).parent() 来获取一个包含所有其他按钮的父标签元素的 jQuery 对象并从中删除颜色类以使它们再次变灰。

$(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>

Answer 2

为了让您的background-color 出现，您应该将label 上的appearance 属性设置为none 而不是button。

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

在设置新的 CSS 类之前，您应该在点击时从 button 中删除所有 CSS 类。