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

Question

目的

试图把一个已经样式等的按钮，使得当在其上的用户点击，颜色会根据改变无线电输入的背景颜色到无线电价值。

预期的结果

当点击按钮“中性”，改变按钮的背景颜色为白色。
点击按钮“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 \t " 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显示出来，你应该设置labelappearance属性none而不是button。

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

您应该从button你设置新的CSS类之前取消对所有点击CSS类。