I am a js newbie (I am a graphic designer, not a coder). I need a toggle button to use within an application. I unfortunately cannot use CSS3 as it does not work in the app (I could have done this on my own with a pure CSS3 toggle button) so I decided to use images for the toggle button. I created a rollover image of the toggle button with the ON state on top and the Off state beneath. I am then using CSS to position and hide the Off state, then I created a new class with :hover to move the Off state image up to replace the On state. This is commonly used to create a simple rollover effect and I can do this easily, however I need it to switch when clicked, not hovered. This is where js is needed.

I also have a hidden checkbox (#optionsAutoClean) that I need to be checked when the toggle is ON and unchecked when the toggle is OFF.

I also need to be able to default the toggle to OFF on some, and ON on the other.

Any help would be appreciated. Again, I do not know much JS at all.

Below is my code and link to jsfiddle.

HTML:

```
<div>
  <a id="btnAutoClean" class="toggleBtn" title="On/Off"></a>
  <input id="optionsAutoClean" disabled="disabled" class="toggleChk" type="checkbox">
</div>

```

CSS:

```
.toggleBtn {
    display: block;
    width: 57px;
    height: 20px;
    background-image:url('http://techtalk.pcpitstop.com/wp-content/uploads/toggle.png');
}
.toggleBtn:hover {
    cursor:pointer;
}
.toggleBtn_Off {
    background-position: 0 -20px;
}
.toggleBtn_On {
    background-position: 0 0;
}
.toggleChk {
    display:none;
}

```

JavaScript: (I took a stab at this)

```
$(document).ready(function(){
    $(".toggleBtn").removeClass(".toggleBtn_Off").addClass(".toggleBtn_On");
    $(".toggleBtn").removeClass(".toggleBtn_On").addClass(".toggleBtn_Off");
   });
});

```

Link to jsfiddle: <https://jsfiddle.net/dd8v3wgb/1/>