Change state of elements via checkbox

Simply add/remove the class name from an element as required

by alano

HTML

<div class="checkbox">
    <input id="check" name="1" type="checkbox" value="1" />
    <label for="check">Check-me</label>
</div>
<output id="iOne" class="lamp"></output>
<output id="iTwo" class="lamp"></output>

CSS

body {
font-family: "Lucida Grande", Verdana, Arial, sans-serif, Helvetica;
}
.checkbox {
display: block;
width: 94px;
height: 27px;
overflow: hidden;
border-radius: 3px;
}    
input[type=checkbox] {
display: none;
}

input[type=checkbox] + label {
text-indent: -9999px;
display: block;
width: 150px;
height: 27px;
line-height: 27px;
background: transparent url("http://dl.dropbox.com/u/391082/sprite2.png") no-repeat -56px 0;
-webkit-transition: background-position 0.3s ease-in-out;
-moz-transition: background-position 0.3s ease-in-out;
}

input[type=checkbox]:checked + label {
-webkit-transition: background-position 0.3s ease-in-out;
-moz-transition: background-position 0.3s ease-in-out;
background-position: -3px 0;
}

output.lamp {
    display: block;
    width: 8px;
    height: 8px;
    margin-left: 20px;
    margin-top: 20px;
    background-color: rgb(0,0,0);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
                0px 0px 3px 2px rgba(0,0,0,0.5);
     border-radius: 4px;
     clear: both;
}

output.lamp.red {
    background-color: rgb(226,0,0);
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
                0px 0px 3px 2px rgba(226,0,0,0.5);
}

output.lamp.green {
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
                0px 0px 3px 2px rgba(135,187,83,0.5);
    background-color: rgb(135,187,83);
}

JavaScript

$(document).ready(function () {
    $("input#check").change(function () {
        if ($(this).prop("checked")) {
            $("#iOne").addClass("green");
            $("#iTwo").addClass("red");
        } else {
            $("#iOne").removeClass("green");
            $("#iTwo").removeClass("red");
        }            
    });
});

//When copying and running this code outside jsfiddle, don't forget to include a <script> tag in the <head> of your document, referencing the jQuery library.