选中复选框时添加类的Javascript

Question

我有这段代码:

<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>

当选中复选框时,有人可以帮助添加"已选择"类的JavaScript吗？

谢谢

Answer 1

这个jQuery会做到这一点:

$('#seo').change(function(){
    if($(this).is(":checked")) {
        $(this).addClass("checked");
    } else {
        $(this).removeClass("checked");
    }
});

看一下这个jQuery小提琴的工作示例.

编辑:

如果您也需要它在IE中工作,请使用该click事件:

$('#seo').click(function(){
    if($(this).is(":checked")) {
        $(this).addClass("checked");
    } else {
        $(this).removeClass("checked");
    }
});

Answer 2

在纯 JavaScript 中（针对 HTML5）

  document.getElementById ('seo').addEventListener ('click', function (ev) {
    ev.target.parentNode.classList[ ev.target.checked ? 'add' : 'remove'] ('selected');
  }, false);

还有一个 classList.toggle 函数，但始终存在复选框和 classList 可能失去同步的危险。