将复选框转换为切换按钮

Question

I want to change checkbox to toggle button? There are no label tags in my input tags and I cant add them manually either, because I dont have access to core files. I can add jquery / script and or css to my files via CMS.

Here is the code i have for checkbox

<input type="Checkbox" name="savetheocean">

Is there any solution?

Answer 1

basically this is how you can turn it to a toggle button:

$('input[name="savetheocean"]').click(function(){
    if($(this).is(':checked')){
        //do something
    }
    else{
       //undo something
    }
});

UPDATE:

you can see a working Demo here: http://jsfiddle.net/b4C7G/

Answer 2

JSFiddle:

link

CSS:

a.toggler.on {
  background: green;
  cursor: pointer;
  border: 2px solid black;
  border-right-width: 15px;
  padding: 0 5px;
  border-radius: 5px;
}

a.toggler.off {
  background: red;
  border-right-width: 2px;
  border-left-width: 15px;
}

HTML

<a href="#" class="toggler">&nbsp;</a>

jQuery

$(function () {
    $('input[name="toggle"]').change(function () {
        $("a.toggler").toggleClass("off", this.checked)
    }).change();
})