根據其值更改所選單選按鈕背景

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類。