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, который добавляет класс «selected», когда флажок установлен?

Спасибо

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

Вот чистые 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 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

Из этого можно сделать вывод: jQuery toggleClass и флажок

Но, по сути, вы можете использовать toggleClass для переключения определенного класса CSS:

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

Илииспользуйте addClass только для добавления нового класса:

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

Если вы говорите с диапазоном флажков, вы также можете выбрать с помощью $(":checkbox").

Answer 5

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

Answer 6

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

Answer 7

С jQuery:

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