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

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