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

Question

目的

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

预期结果

单击“中性”按钮时，将按钮的背景色更改为白色。
单击“良好”按钮时，将按钮背景色更改为绿色。
单击按钮“ 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()然后转到label元素对其进行样式设置。

我介绍了一个名为buttons的变量，它是包含所有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类。