如何用jQuery获取input值并为其父级label添加该值作为类名？

我来帮你搞定这个需求！你想要实现的是把每个单选框input的value值，作为类名添加到包裹它的父级label元素上，这样就能通过CSS针对不同类名的label做样式化，比如让"Gray"标签显示对应样式对吧？

先看你的HTML结构：

<li> 
  <label> 
    <input type="radio" id="acf-field" name="acf[field_5af32dbd01019]" value="gray"/>Gray 
  </label> 
</li> 
<li> 
  <label> 
    <input type="radio" id="acf-field" name="acf[field_5af32dbd01019]" value="green"/>Green 
  </label> 
</li>

你之前尝试的代码已经能获取到input的值，但还差最后一步给label加类名。其实更直接的方式是直接遍历每个input元素，然后操作它的父级label：

$("li input").each(function() {
  $(this).parent().addClass($(this).val());
})

这段代码的逻辑很清晰：

• $("li input")：选中所有<li>标签下的input元素
• .each(function() { ... })：逐个遍历选中的每个input
• $(this).parent()：获取当前input的直接父元素，也就是包裹它的label
• .addClass($(this).val())：把当前input的value值作为类名，添加到对应的label上

执行这段代码后，你的label就会变成<label class="gray">和<label class="green">，完全符合你的需求，之后就可以通过CSS针对这些类名设置专属样式了。

内容的提问来源于stack exchange，提问作者user5853892