Three state button

by David Kammer

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="q1"/>
    </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="q2"/>
    </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="q3"/>
    </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...