jQuery 复选框标签的jQuery选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1186416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery selector for the label of a checkbox
提问by Darwyn
<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>
If I have a check box with a label describing it, how can I select the label using jQuery? Would it be easier to give the label tag an ID and select that using $(#labelId)?
如果我有一个带有描述它的标签的复选框，我如何使用 jQuery 选择标签？给标签标签一个 ID 并使用 选择它会更容易$(#labelId)吗？
回答by Kip
This should work:
这应该有效：
$("label[for='comedyclubs']")
See also: Selectors/attributeEquals - jQuery JavaScript Library
回答by Hanky Panky
$("label[for='"+$(this).attr("id")+"']");
This should allow you to select labels for all the fields in a loop as well. All you need to ensure is your labels should say for='FIELD'where FIELDis the id of the field for which this label is being defined.
这也应该允许您为循环中的所有字段选择标签。您需要确保的是您的标签应该说明正在定义此标签的字段的 idfor='FIELD'在哪里FIELD。
回答by Darko Z
This should do it:
这应该这样做：
$("label[for=comedyclubs]")
If you have non alphanumeric characters in your id then you must surround the attr value with quotes:
如果您的 id 中有非字母数字字符，那么您必须用引号将 attr 值括起来：
$("label[for='comedy-clubs']")
回答by Briganti
Another solution could be:
另一种解决方案可能是：
$("#comedyclubs").next()
回答by Pete - iCalculator
Thanks Kip, for those who may be looking to achieve the same using $(this) whilst iterating or associating within a function:
感谢 Kip，对于那些可能希望在函数内迭代或关联时使用 $(this) 实现相同目标的人：
$("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );
I looked for a while whilst working this project but couldn't find a good example so I hope this helps others who may be looking to resolve the same issue.
我在工作这个项目时找了一段时间，但找不到一个很好的例子，所以我希望这可以帮助那些可能希望解决同样问题的人。
In the example above, my objective was to hide the radio inputs and style the labels to provide a slicker user experience (changing the orientation of the flowchart).
在上面的示例中，我的目标是隐藏无线电输入并设置标签样式以提供更流畅的用户体验（更改流程图的方向）。
You can see an example here
你可以在这里看到一个例子
If you like the example, here is the css:
如果你喜欢这个例子，这里是 css：
.orientation { position: absolute; top: -9999px; left: -9999px;}
.orienlabel{background:#1a97d4 url('http://www.ifreight.solutions/process.html/images/icons/flowChart.png') no-repeat 2px 5px; background-size: 40px auto;color:#fff; width:50px;height:50px;display:inline-block; border-radius:50%;color:transparent;cursor:pointer;}
.orR{ background-position: 9px -57px;}
.orT{ background-position: 2px -120px;}
.orB{ background-position: 6px -177px;}
.orienSel {background-color:#323232;}
and the relevant part of the JavaScript:
以及 JavaScript 的相关部分：
function changeHandler() {
$(".orienSel").removeClass( "orienSel" );
if(this.checked) {
$("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );
}
};
An alternate root to the original question, given the label follows the input, you could go with a pure css solution and avoid using JavaScript altogether...:
原始问题的替代根源，鉴于标签在输入之后，您可以使用纯 css 解决方案并完全避免使用 JavaScript ...：
input[type=checkbox]:checked+label {}
