<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>
如果我有一个标签描述它的复选框,我如何使用jQuery选择标签?是否更容易给标签标签一个ID并使用$(#labelId)选择?
<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>
如果我有一个标签描述它的复选框,我如何使用jQuery选择标签?是否更容易给标签标签一个ID并使用$(#labelId)选择?
当前回答
另一个解决方案是:
$("#comedyclubs").next()
其他回答
这应该可以工作:
$("label[for='comedyclubs']")
参见:Selectors/attributeEquals - jQuery JavaScript库
$("label[for='"+$(this).attr("id")+"']");
这应该允许您为循环中的所有字段选择标签。所有你需要确保的是你的标签应该说for='FIELD',其中FIELD是这个标签被定义的字段的id。
这应该做到:
$("label[for=comedyclubs]")
如果你的id中有非字母数字字符,那么你必须用引号将attr值括起来:
$("label[for='comedy-clubs']")
另一个解决方案是:
$("#comedyclubs").next()
感谢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 {}