[英]jQuery selector for the label of a checkbox
<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>
If I have a check box with a label describing it, how can I select the label using jQuery? 如果我有一个带有描述它的标签的复选框,我如何使用jQuery选择标签? Would it be easier to give the label tag an ID and select that using
$(#labelId)
? 为label标签添加ID并使用
$(#labelId)
选择它会更容易吗?
This should work: 这应该工作:
$("label[for='comedyclubs']")
See also: Selectors/attributeEquals - jQuery JavaScript Library 另请参见: Selectors / attributeEquals - jQuery JavaScript Library
$("label[for='"+$(this).attr("id")+"']");
This should allow you to select labels for all the fields in a loop as well. 这应该允许您为循环中的所有字段选择标签。 All you need to ensure is your labels should say
for='FIELD'
where FIELD
is the id of the field for which this label is being defined. 您需要确保的是您的标签应该
for='FIELD'
,其中FIELD
是为其定义此标签的字段的ID。
This should do it: 这应该这样做:
$("label[for=comedyclubs]")
If you have non alphanumeric characters in your id then you must surround the attr value with quotes: 如果您的ID中包含非字母数字字符,则必须用引号括住attr值:
$("label[for='comedy-clubs']")
另一个解决方案是:
$("#comedyclubs").next()
Thanks Kip, for those who may be looking to achieve the same using $(this) whilst iterating or associating within a function: 感谢Kip,对于那些可能希望在函数内迭代或关联时使用$(this)实现相同目标的人:
$("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );
I looked for a while whilst working this project but couldn't find a good example so I hope this helps others who may be looking to resolve the same issue. 我在这个项目工作期间找了一段时间,但找不到一个好的例子,所以我希望这有助于其他可能正在寻求解决同一问题的人。
In the example above, my objective was to hide the radio inputs and style the labels to provide a slicker user experience (changing the orientation of the flowchart). 在上面的示例中,我的目标是隐藏无线电输入并设置标签样式以提供更流畅的用户体验(更改流程图的方向)。
You can see an example here 你可以在这里看到一个例子
If you like the example, here is the css: 如果你喜欢这个例子,这里是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;}
and the relevant part of the JavaScript: 以及JavaScript的相关部分:
function changeHandler() {
$(".orienSel").removeClass( "orienSel" );
if(this.checked) {
$("label[for="+$(this).attr("id")+"]").addClass( "orienSel" );
}
};
An alternate root to the original question, given the label follows the input, you could go with a pure css solution and avoid using JavaScript altogether...: 原始问题的另一个根,如果标签跟随输入,您可以使用纯css解决方案并避免使用JavaScript ...:
input[type=checkbox]:checked+label {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.