javascript 选中复选框时添加类的Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7223255/
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
Javascript to add class when checkbox is selected
提问by Andrei
I have this piece of code:
我有这段代码：
<div class="quote-box-col14">
<label for="seo" class="quote-service-seo">SEO</label>
<input type="checkbox" name="seo" id="seo" value="Y" class="checkbox-seo" />
</div>
Someone can help with a JavaScript that adds class "selected" to when checkbox is selected?
有人可以帮助使用 JavaScript 在选择复选框时添加“selected”类？
Thanks
谢谢
回答by Nathan
This jQuery will do it:
这个 jQuery 会做到：
$('#seo').change(function(){
if($(this).is(":checked")) {
$(this).addClass("checked");
} else {
$(this).removeClass("checked");
}
});
See this jQuery fiddlefor a working example.
有关工作示例，请参阅此 jQuery fiddle。
Edit:
编辑：
If you need it to work in IE too, use the clickevent instead:
如果您也需要它在 IE 中工作，请改用该click事件：
$('#seo').click(function(){
if($(this).is(":checked")) {
$(this).addClass("checked");
} else {
$(this).removeClass("checked");
}
});
回答by HBP
And in pure JavaScript (for HTML5)
并且在纯 JavaScript 中（用于 HTML5）
document.getElementById ('seo').addEventListener ('click', function (ev) {
ev.target.parentNode.classList[ ev.target.checked ? 'add' : 'remove'] ('selected');
}, false);
There is also a classList.toggle function but there is always a danger that the checkbox and the classList might lose synchronism.
还有一个 classList.toggle 函数，但总是存在复选框和 classList 可能失去同步的危险。
回答by Patrick Berkeley
Here's pure js that will work for adding and removing the selected class when any checkbox is checked or unchecked.
这是纯 js，可以在选中或取消选中任何复选框时添加和删除所选类。
Working example: http://jsfiddle.net/S9tSS/
工作示例：http: //jsfiddle.net/S9tSS/
var inputs = document.getElementsByTagName("input");
var checkboxes = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
checkboxes.push(inputs[i]);
if (inputs[i].checked) {
checked.push(inputs[i]);
}
}
}
for (var j = 0; j < checkboxes.length; j++) {
checkboxes[j].onclick = function() {
if (this.checked == true) {
this.className += " selected";
} else {
removeClassName(this, 'selected');
}
}
}
function removeClassName(e,t) {
if (typeof e == "string") {
e = xGetElementById(e);
}
var ec = ' ' + e.className.replace(/^\s+|\s+$/g,'') + ' ';
var nc = ec;
if (ec.indexOf(' '+t+' ') != -1) {
nc = ec.replace(' ' + t + ' ',' ');
}
e.className = nc.replace(/^\s+|\s+$/g,'');
return true;
}
Sources: ...well... I would post them, but I'm a new use an can't post more than two links.
来源：...嗯...我会张贴它们，但我是一个新用户，不能张贴两个以上的链接。
回答by Brian Mains
You can infer from this: jQuery toggleClass and check checkbox
您可以由此推断：jQuery toggleClass 和 checkbox
But essentially, you can use toggleClass to toggle a specific CSS class:
但本质上，您可以使用 toggleClass 来切换特定的 CSS 类：
$("#seo").click(function() {
$(this).toggleClass("cssClassToToggle");
});
Or use addClass to add a new class only:
或者使用 addClass 只添加一个新类：
$("#seo").click(function() {
$(this).addClass("cssClassToToggle");
});
If you are talking a range of checkboxes, you can target with $(":checkbox")too.
如果您正在谈论一系列复选框，您也可以定位$(":checkbox")。
回答by Dennis
$('#seo').click(function() {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
回答by Arnaud Le Blanc
With jQuery:
使用 jQuery：
$('input[type="checkbox"]').change(function() {
if (this.checked) {
$(this).addClass('checked');
} else {
$(this).removeClass('checked');
}
});
回答by alex
$('#seo').click(function(){
$(this).toggleClass('selected', this.checked);
});
