将复选框转换为切换按钮

Question

我想更改复选框以切换按钮？我的输入标签中没有标签标签，我也无法手动添加它们，因为我无法访问核心文件。我可以通过CMS将jquery / script和/ css添加到我的文件中。

这是我对复选框的代码

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

有没有解决方案？

Answer 1

基本上这就是你可以把它变成一个切换按钮的方式：

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

更新：

您可以在此处查看有效的演示：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();
})