Three state button

HTML

<script src="http://uniformjs.com/javascripts/jquery.uniform.js"></script>
<link rel="stylesheet" href="http://uniformjs.com/stylesheets/uniform.default.css">
<form ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
    <div class="threeStateSelect"> <span class="threeStateSelect_left" data-return-value="yes">&#x2713;</span>
 <span class="threeStateSelect_center" data-return-value="">Chest Pain
            <span class="threeStateSelect_centerLeftClickCatcher"></span>
 <span class="threeStateSelect_centerRightClickCatcher"></span>
</span> <span class="threeStateSelect_right" data-return-value="no">&#10007;</span>

        <input type="text" class="threeStateSelect_textField" name="Chest Pain" />
    </div>
    <div class="threeStateSelect"> <span class="threeStateSelect_left" data-return-value="yes">&#x2713;</span>
 <span class="threeStateSelect_center" data-return-value="">Normal, unlabored breathing
            <span class="threeStateSelect_centerLeftClickCatcher"></span>
 <span class="threeStateSelect_centerRightClickCatcher"></span>
</span> <span class="threeStateSelect_right" data-return-value="no">&#10007;</span>

        <input type="text" class="threeStateSelect_textField" name="Normal, unlabored breathing" />
    </div>
    <div class="threeStateSelect"> <span class="threeStateSelect_left" data-return-value="yes">&#x2713;</span>
 <span class="threeStateSelect_center" data-return-value="">Pregnant
            <span class="threeStateSelect_centerLeftClickCatcher"></span>
 <span class="threeStateSelect_centerRightClickCatcher"></span>
</span> <span class="threeStateSelect_right" data-return-value="no">&#10007;</span>

        <input type="text" class="threeStateSelect_textField" name="Pregnant" />
    </div>
    <INPUT TYPE="SUBMIT" VALUE="Send" />
</form>

CSS

div.threeStateSelect {
    position:relative;
    border:0.15em solid #a1a1a1;
    background:#dddddd;
    width:20em;
    height:1.25em;
    border-radius:25px;
    text-align:center;
    cursor: pointer;
    margin:5px;
}
/* Used to hold text and catch clicks, and set default background*/
 span.threeStateSelect_left {
    float:left;
    width:2em;
    height:100%;
    background:#E6ECDA;
    border-top-left-radius:22px;
    border-bottom-left-radius:22px;
    text-align:center;
}
/* Used to hold text and catch clicks, and set default background*/
 span.threeStateSelect_right {
    float:right;
    width: 2em;
    height:100%;
    background:#E3C5C0;
    border-top-right-radius:22px;
    border-bottom-right-radius:22px;
    text-align:center;
}
.threeStateSelect_textField {
    visibility:hidden;
}
/* Used to hold text and catch clicks, but not set background*/
 span.threeStateSelect_center {
    position:absolute;
    height:100%;
    ;
    left:2em;
    right:2em;
}
span.threeStateSelect_centerLeftClickCatcher {
    position:absolute;
    width:50%;
    left:0;
    height:100%;
}
span.threeStateSelect_centerRightClickCatcher {
    position:absolute;
    right:0;
    width:50%;
    height:100%;
}
/*overrides to reset the background*/
 span.threeStateSelect_centerReflectSelectedLeft {
    background:#ACC084;
}
span.threeStateSelect_centerReflectSelectedRight {
    background:#B86F61;
}
span.threeStateSelect_leftSelected {
    background:#ACC084;
}
span.threeStateSelect_rightSelected {
    background:#B86F61;
}
span.threeStateSelect_leftNotSelected {
    background:#CCCCCC;
}
span.threeStateSelect_rightNotSelected {
    background:#CCCCCC;
}

JavaScript

(function ($) {

    $.fn.setThreeStateSelect = function (action) {
        // console.log("setThreeStateSelect called with action:"+action);

        var leftSpan = this.children(".threeStateSelect_left");
        var rightSpan = this.children(".threeStateSelect_right");
        var centerSpan = this.children(".threeStateSelect_center");
        var hiddenTextField = this.children(".threeStateSelect_textField");

        switch (action) {
            case "selectLeft":
                leftSpan.removeClass("threeStateSelect_leftNotSelected");
                leftSpan.addClass("threeStateSelect_leftSelected");
                rightSpan.removeClass("threeStateSelect_rightSelected");
                rightSpan.addClass("threeStateSelect_rightNotSelected");
                centerSpan.addClass("threeStateSelect_centerReflectSelectedLeft");
                centerSpan.removeClass("threeStateSelect_centerReflectSelectedRight");
                hiddenTextField.val(leftSpan.attr("data-return-value"));
                break;
            case "selectRight":
                rightSpan.removeClass("threeStateSelect_rightNotSelected");
                rightSpan.addClass("threeStateSelect_rightSelected");
                leftSpan.removeClass("threeStateSelect_leftSelected");
                leftSpan.addClass("threeStateSelect_leftNotSelected");
                centerSpan.addClass("threeStateSelect_centerReflectSelectedRight");
                centerSpan.removeClass("threeStateSelect_centerReflectSelectedLeft");
                hiddenTextField.val(rightSpan.attr("data-return-value"));
                break;
            case "selectOff":
                leftSpan.removeClass("threeStateSelect_leftSelected threeStateSelect_leftNotSelected");
                rightSpan.removeClass("threeStateSelect_rightSelected threeStateSelect_rightNotSelected");
                centerSpan.removeClass("threeStateSelect_centerReflectSelectedLeft threeStateSelect_centerReflectSelectedRight");
          ...