jQuery addClass example

Change class name on click in jQuery

by Sascha

HTML

<form>

        <input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
        <input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
        <input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
        <input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>
        <input type="checkbox" checked class="noselect" class="SelectForm"><span>Test</span><br>

    </form>

CSS

.noselect
    {-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }   

    .SelectForm {
        -webkit-appearance: none;
        background-color: trasparent;
        border: 3px solid #02a494;
        padding: 0px;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        display: inline-block;
        position: relative;
        top: 8px;
    }
    .SelectForm:checked:after {
        content: '✔';
        position: absolute;
        top: -6px; left: 1px;
        font-size: 26px;
        line-height: 0.6;
        color: #0C7B70;
        transition: all .2s;
        font-size: 32px;
    }
    .SelectForm:checked {
        background-color: trasparent;
        color: #0E9C8E;
        opacity: 1;
        transform: scale(1);
    }
    .SelectForm:focus {
      border: none;
    }
    .SelectForm:hover
    {border: 3px solid #0E9C8E;
    cursor: pointer;
    }

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})