Change the background-position of :before CSS selector with JQuery
<p>I'm using <a href="http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/" rel="nofollow">this</a> for custom radio buttons and checkboxes, but I need to change the <code>:before</code> element's background on click. Is it possible?</p>

<p>HTML</p>

<pre><code>&lt;div class="checkbox"&gt;
&lt;input type="checkbox" value="1" name="test"&gt;
&lt;/div&gt;
</code></pre>

<p>CSS (its .less)</p>

<pre><code>.checkbox {
    display: inline-block;
    margin: 0 4px 0 0;
    cursor: pointer;
    text-align: left;
    padding: 0px;

    input { display: none; }

    &amp;:before {
        background: url(/img/checkboxes.png) no-repeat;
        content: "";
        float: left;
        height: 18px;
        width: 19px;
        margin: 0;
    }
}
</code></pre>
