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>