jquery：改變輸入標籤的顏色

Question

<label>  
<input type="radio" id="other" name="level_0" value="other" class="other">other 
</label> 

說我有上面的一個無序列表。點擊單選按鈕時，我希望標籤被塗成紅色。

我曾嘗試以下：

$('input[type=radio]').click(function(){ 
if($(this).is(':checked')){ 
    $(this).prev().css("color","red"); 
} 
}); 

不應該這樣搶前一個元素，「標籤」，並改變其顏色爲紅色？

Answer 1

$('input[type=radio]').click(function() { 
 
    if ($(this).is(':checked')) { 
 
    $(this).closest('label').addClass("red"); 
 
    } 
 
});

.red { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="radio" id="other" name="level_0" value="other" class="other">other 
 
</label>

1. 使用.closest()
2. .prev()用於同級元素。
3. 也可以用.parent()
4. 建議使用.addClass()，而不是添加風格直接

Answer 2

我假設prev（）查詢搜索太遠。當我將它改爲parent（）（這很有意義，因爲輸入在標籤內），它可以正常工作。當你不研究你正在做的事情的基本原理時，會發生這種情況！

Answer 3

，你也可以使用這個

$('input[type=radio]').click(function(){ 
    if($(this).is(':checked')){ 
    $(this).closest('label').css({"color":"red"}); 
    } 
}); 

變化prev（）到最近的（）和支架括號內，如果你想使用CSS（）

https://jsfiddle.net/darkrulerbreaker/neqrknkr/

Answer 4

你不」不需要爲此使用jquery - 讓CSS完成這一切。同樣 - 要清楚 - 您是否在標籤文本之後 - 是紅色（使用顏色）還是標籤背景是紅色（使用背景）。這將更改輸入的選中狀態而不是點擊事件的標籤顏色/背景。

從CSS技巧網站（https://css-tricks.com/almanac/selectors/c/checked/） - 「的：檢查僞類選擇籤或切換成開啓狀態。如果他們不選擇或檢查時匹配無線電和checkbox的輸入類型，不匹配。」 。

請注意，這會影響輸入後的標籤。

input[type=radio]:checked + label{ 
 
    color:red 
 
}

<input type="radio" id="option1" name="level_0" value="1" class="other"> 
 
    <label>option 1</label>  
 
<input type="radio" id="option2" name="level_0" value="2" class="other"> 
 
    <label>option 2</label>