jQuery选择一个复选框的标签(jQuery selector for the label of

2019-06-17 16:17发布

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

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

Answer 1:

这应该工作:

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

参见: 选择器/ attributeEquals - jQuery JavaScript库



Answer 2:

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

这应该允许您在一个循环中的所有字段选择标签为好。 所有你需要确保你的标签应该说for='FIELD' ,其中FIELD是其被定义此标签的字段的ID。



Answer 3:

这应该这样做:

$("label[for=comedyclubs]")

如果您的帐号有非字母数字字符,则必须用引号括住的Attr值:

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


Answer 4:

另一种解决办法是:

$("#comedyclubs").next()


Answer 5:

感谢硖,对于那些谁可能会寻找到实现使用$相同(本),而迭代或函数内的关联:

$("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 {}


文章来源: jQuery selector for the label of a checkbox