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");
    }
});

有关工作示例，请参阅this jQuery fiddle。

编辑：

如果您也需要在IE中使用它，请改为使用click事件：

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

Answer 2

您可以从中推断出：jQuery toggleClass and check checkbox

但实际上，您可以使用toggleClass来切换特定的CSS类：

$("#seo").click(function() {
    $(this).toggleClass("cssClassToToggle");
});

或者使用addClass仅添加新类：

$("#seo").click(function() {
    $(this).addClass("cssClassToToggle");
});

如果您正在谈论一系列复选框，您也可以使用$(":checkbox")进行定位。

Answer 3

纯JavaScript（适用于HTML5）

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

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

Answer 4

这是纯粹的js，当选中或取消选中任何复选框时，它将用于添加和删除所选类。

工作示例：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;
}

来源：......好吧......我会发布它们，但我是一个新用途，不能发布两个以上的链接。

Answer 5

使用jQuery：

$('input[type="checkbox"]').change(function() {
    if (this.checked) {
        $(this).addClass('checked');
    } else {
        $(this).removeClass('checked');
    }
});

Answer 6

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

Answer 7

$('#seo').click(function(){
    $(this).toggleClass('selected', this.checked);
});

选中复选框时添加类的Javascript

7 个答案: