复选框标签的jQuery选择器

237

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

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

jquery checkbox jquery-selectors

— 达温
source

441

这应该工作：

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

另请参见：Selectors / attributeEquals-jQuery JavaScript库

— 基普
source

3

对于Webkit浏览器（Safari / Chrome），您可以$('#comedyclubs')[0].labels访问分配给的所有标签#comedyclubs。

— 马特2012年

1

使用.text（）将对象转换为字符串：alert（$（“ label [for ='comedyclubs']”）。text（））;

— 罗伦（Loren）2012年

只需使用$（“ label [for ='comedyclubs']”）即可获得价值，但会使标签空白。因此，请使用$（“ label [for ='comedyclubs']”）。text（）

— shahil

69

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

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

— 汉基·潘基
source

5

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

45

应该这样做：

$("label[for=comedyclubs]")

如果您的ID中包含非字母数字字符，则必须在attr值两边加上引号：

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

— 达科Z
source

2

当答案与领先答案同时提交时，SO声誉如何变化。:)

— sscirrus

赞成用引号将attr值引起来的建议:)

— gardarvalur

5

另一个解决方案可能是：

$("#comedyclubs").next()

— 布里甘蒂
source

12

这可能不是最稳定的解决方案，因为它要求标签始终是复选框之后的下一项。重新设计图形可能会破坏这种逻辑。

— Kip

3

对！但在这种情况下，：D可以正常工作，并且对于更安全的版本，我们可以定义.next（'label'）或.prev（'label'）。

— Briganti

较小的稳定改进将是：$("#comedyclubs").nextAll().first()

— sscirrus

喜欢你的方法。$（）。next（）。text（）

— Rm558

0

感谢Kip，对于那些希望在$$（this）迭代或关联到函数中的同时实现$（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 {}

— 皮特-iCalculator
source