如果单选按钮被选中，jQuery addClass 来标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17152494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery addClass to label if radio button checked
提问by Kumar Gaurav
I am unable to add class in label for radio button list, below is html code:
我无法在单选按钮列表的标签中添加类，下面是 html 代码：
<div class="custom-radio">
<input id="MainContent_rblUserType_2" type="radio" checked="checked" value="3" name="MainContent$rblUserType">
<label class="" for="MainContent_rblUserType_2">I am buyer</label>
</div>
And Jquery that I am trying to add class in label is :
我试图在标签中添加类的 Jquery 是：
$(document).ready(function() {
if($("input.check").is(":checked")){
$(this).label.addClass("checked");
}
});
回答by Mohammad Adil
use .next()
用 .next()
$("input:radio").next('label').addClass("checked");
Also, Your input do not have any class with name check, so you might want to change it to
此外，您的输入没有任何带有 name 的类check，因此您可能希望将其更改为
$("input:radio").is(":checked")
You can also do this instead of your if condition -
你也可以这样做而不是你的 if 条件 -
$(document).ready(function() {
$("input:radio:checked").next('label').addClass("checked");
});
Demo --->http://jsfiddle.net/tLFjA/5/
回答by Karl-André Gagnon
In your case, $(this)is the document, not the input. try instead of this :
在您的情况下，$(this)是文档，而不是输入。尝试而不是这个：
$(document).ready(function() {
if($("input.check").is(":checked")){
$(this).label.addClass("checked");
}
});
this :
这个 ：
$(document).ready(function() {
$("input.check:checked").next('label').addClass('checked')
});
Also, you'll probably need to bind a change event.
此外，您可能需要绑定更改事件。
$('input.check').change(function(){
var $this = $(this);
$this.is(:checked) ? $this.next('label').addClass('active') : $this.next('label').removeClass('active')
})
There is also the CSS3 possibility :
还有 CSS3 的可能性：
input.check:checked ~ label{ your styles}
The ~can be + depending on your DOM.
该~可+取决于你的DOM。
回答by Prem
<div class="custom-radio">
<input id="MainContent_rblUserType_2" class="check" type="radio" checked="checked" value="3" name="MainContent$rblUserType">
<label class="checkLabel" for="MainContent_rblUserType_2">I am buyer</label>
</div>
$(document).on("click", 'input.check', function () {
if ($(this).is(":checked")) {
$('label.checked').removeClass('checked');
$(this).next("label.checkLabel").addClass("checked");
}
});
You need to add classes to input and label as shown above.
It binds an event to radio input and when checked, adds class and removes class when radio input is not checked
Demo Jsfiddle, http://jsfiddle.net/prem_nagalla1/h7BZa/
您需要向输入和标签添加类，如上所示。
它将事件绑定到无线电输入，并在选中时添加类并在未选中无线电输入时删除类
演示 Jsfiddle，http://jsfiddle.net/prem_nagalla1/h7BZa/
