用于复选框标签的 jQuery 选择器答案

【问题标题】：jQuery selector for the label of a checkbox用于复选框标签的 jQuery 选择器
【发布时间】：2010-11-14 06:12:09
【问题描述】：

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

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

【问题讨论】：

标签： jquery checkbox jquery-selectors

【解决方案1】：

这应该可行：

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

另请参阅：Selectors/attributeEquals - jQuery JavaScript Library

【讨论】：

对于 Webkit 浏览器 (Safari/Chrome)，您可以通过 $('#comedyclubs')[0].labels 访问分配给 #comedyclubs 的所有标签。
使用 .text() 将对象转换为字符串：alert($("label[for='comedyclubs']").text());
只需使用 $("label[for='comedyclubs']") 即可获得价值，但会使标签变为空白。所以，使用 $("label[for='comedyclubs']").text()

【解决方案2】：

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

这应该允许您为循环中的所有字段选择标签。您只需要确保您的标签应该是for='FIELD'，其中FIELD 是定义此标签的字段的ID。

【讨论】：

对于拥有多个领域的人来说，这是一个很好的答案。这个答案应该是#1。

【解决方案3】：

应该这样做：

$("label[for=comedyclubs]")

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

$("label[for='comedy-clubs']")

【讨论】：

奇怪的是，当这个答案与领先的答案在同一分钟提交时，SO 的声誉如何。 :)
赞成用引号将 attr 值括起来的建议 :)

【解决方案4】：

另一种解决方案可能是：

$("#comedyclubs").next()

【讨论】：

这可能不是最稳定的解决方案，因为它要求标签始终是复选框之后的下一项。图形重新设计可能会打破这种逻辑。
对！但在这种情况下工作正常：D 并且对于更安全的版本，我们可以定义 .next('label') 或 .prev('label')。
轻微的稳定性改进是：$("#comedyclubs").nextAll().first()
喜欢你的方法。 $().next().text()

【解决方案5】：

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

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

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

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

你可以see an example here

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

【讨论】：