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");
}
});

这不应该抓住前一个元素'label'，并将其颜色更改为红色？

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>

使用.closest()
.prev()用于兄弟元素。
也可以使用.parent()
建议使用.addClass()而不是直接添加样式

Answer 2

我假设prev（）查询搜索得太远了。当我将其更改为parent（）（这是有道理的，因为输入在标签内）时，它正常工作。当你不学习你正在做的事情的基础时，会发生这种情况！

Answer 3

您也可以使用此

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

如果要使用css（）

，请将prev（）更改为最近的（）和括号内的括号

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

Answer 4

你根本不需要使用jquery - 让CSS完成所有工作。另外 - 要清楚 - 你是在标签文字之后 - 是红色（使用颜色）还是标签背景为红色（使用背景）。这将更改输入的选中状态而不是单击事件的标签颜色/背景。

来自CSS技巧网站（https://css-tricks.com/almanac/selectors/c/checked/） - ＆＃34;：checked伪类选择器在选中或切换为打开状态时匹配radio和checkbox输入类型。如果未选中或选中它们，则无法匹配。＆＃34;。

请注意，这会影响输入后的标签。

＆＃13;

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

＆＃13;

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

＆＃13;

jquery：更改输入标签的颜色

4 个答案: