如何使用 jquery 切换标签的样式答案

【问题标题】：How to switch styles for labels using jquery如何使用 jquery 切换标签的样式
【发布时间】：2011-11-29 07:26:47
【问题描述】：

我有复选框。如果复选框被选中，我想切换包含复选框的 div 的样式。

<label for="ids">
       <div>
           <img src="img/87_1180.jpg">
           <h4>Name</h4>
           <input name="ids" id="ids" type="checkbox">
       </div>
</label>

当用户点击标签时，复选框被选中。如果复选框被选中，我想添加类。

感谢您的帮助。

【问题讨论】：

标签： javascript jquery javascript-events

【解决方案1】：

$("#ids").click(function() {
    $(this).parent().toggleClass("yourClassName");
});

【讨论】：

请注意，您可能需要将开关 $(this).prop('checked') 添加到 .toggleClass - 否则您可能会导致状态不匹配。

【解决方案2】：

乔希，

实际上通常使用标签的正确方法是这样的：

<label for="ids">Name</label>
<input name="ids" id="ids" type="checkbox" />

我认为根据 W3C 标准将输入放在标签内并不常见，请参阅：

http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

虽然它可能会验证您编写代码的方式，但具体控制样式要困难得多。

试试这个代码来改变标签：

$("#ids").click(function() {
    $('label[for="' + $(this).attr('name') + '"]').toggleClass('myClass');
});

【讨论】：