JS: Check boxes Linked to Span & Background Color
<p>I have two checkboxes (see below) that when clicked, activate a change in background colour of a span. The problem is, I need it such that only ONE of these checkboxes can be activated, while the other one gets de-activated. I know all about radio buttons, the issue is that even when the radio button deactivates, it does not remove the background color of the span. I need a solution that allows ONLY ONE to be selected, and automatically removes the background colour when another option is selected.</p>

<p>Example:
<a href="http://eblacksmith.com/test/" rel="nofollow">http://eblacksmith.com/test/</a></p>

<p>Core code:</p>

<pre><code>$(document).ready(function() {

$("span[class='checkbox']").addClass("unchecked");

    $(".checkbox").click(function(){

        if($(this).children("input").attr("checked")){  
            // uncheck
            $(this).children("input").attr("checked", false);
            $(this).removeClass("checked");
            $(this).addClass("unchecked");
        }else{
            // check
            $(this).children("input").attr("checked", true);
            $(this).removeClass("unchecked");
            $(this).addClass("checked");
        }

        //alert($(this).children("input").attr("checked"));
    });

});
</code></pre>
