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?

Thanks

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?

Thanks

• javascript
• jquery
• checkbox

7 Answers 7

This jQuery will do it:

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

See this jQuery fiddle for a working example.

Edit:

If you need it to work in IE too, use the click event instead:

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

And in pure JavaScript (for 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.

You can infer from this: jQuery toggleClass and check checkbox

But essentially, you can use toggleClass to toggle a specific CSS class:

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

Or use addClass to add a new class only:

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

If you are talking a range of checkboxes, you can target with $(":checkbox") too.

Here's pure js that will work for adding and removing the selected class when any checkbox is checked or unchecked.

Working example: http://jsfiddle/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.

With jQuery:

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

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

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