javascript - 根据它的值更改选定的单选按钮背景

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 中的 # 颜色代码没有反射(reflect)您尝试分配的颜色。这些十六进制代码需要是缩写的三位 RGB 值或六位 RGB 值，每种颜色有两位数，即 #RGB 或 #RRGGBB，但它就像您通过将“000”添加到您想要的颜色的正确三位数十六进制代码的末尾来混合这两个选项。从每个代码中删除结尾的 000，或者更改为正确的六位十六进制代码。
• 您没有任何代码来在单击其他按钮时从按钮中删除类。

您的 JS 代码似乎过于复杂。我会将点击处理程序绑定(bind)到单选按钮本身，因为 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>