259 
<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>

如果我有一个带有描述它的标签的复选框，我如何使用 jQuery 选择标签？给标签标签一个 ID 并使用 选择它会更容易$(#labelId)吗？

4

5 回答 5

477

这应该有效：

$("label[for='comedyclubs']")

另请参阅：选择器/attributeEquals - jQuery JavaScript 库

于 2009-07-27T04:23:26.333 回答
73 
$("label[for='"+$(this).attr("id")+"']");

这也应该允许您为循环中的所有字段选择标签。您需要确保的只是您的标签应该说明定义该标签的字段的 id 在for='FIELD'哪里。FIELD

于 2012-08-03T07:08:34.327 回答
46

这应该这样做：

$("label[for=comedyclubs]")

如果您的 id 中有非字母数字字符，则必须用引号将 attr 值括起来：

$("label[for='comedy-clubs']")
于 2009-07-27T04:23:51.060 回答
5

另一种解决方案可能是：

$("#comedyclubs").next()
于 2011-02-02T10:23:57.543 回答
2

感谢 Kip，对于那些在函数内迭代或关联时可能希望使用 $(this) 实现相同功能的人：

$("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );

我在工作这个项目时找了一段时间，但找不到一个很好的例子，所以我希望这可以帮助其他可能希望解决同样问题的人。

在上面的示例中，我的目标是隐藏单选输入并设置标签样式以提供更流畅的用户体验（更改流程图的方向）。

你可以在这里看到一个例子

如果你喜欢这个例子，这里是 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;}

和 JavaScript 的相关部分：

function changeHandler() {
    $(".orienSel").removeClass( "orienSel" );
    if(this.checked) {
        $("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );
    }
};

原始问题的替代根，给定标签跟随输入，您可以使用纯 css 解决方案并完全避免使用 JavaScript ...：

input[type=checkbox]:checked+label {}
于 2017-03-05T09:50:24.020 回答