tristate checkbox

HTML

<!-- utf-8 checkmark: http://www.fileformat.info/info/unicode/char/2713/index.htm -->
<h2>Example tristate controls</h2>

<form>
    <table>
        <tr>
            <td>
                <input id="b1" title="this is a tri-state button: &#x2753;,&#x2705;,&#x274C;" type="button" onclick="tristate1(this)" value="&#x2753;" />
                <label for="b1"> This is the Label for b1</label>
            </td>
            <th>button input Question, Check, Cross</th>
        </tr>
        <tr>
            <td>
                <input title="this is a tri-state button: &#x25ef;,&#x25ce;,&#x25c9;" type="button" onclick="tristate2(this)" value="&#x25ef;" />
            </td>
            <th>button input Circle,Bullseye,Fisheye</th>
        </tr>
        <tr>
            <td>
                <input type="text" style="border: none;" onfocus="this.blur()" readonly="true" size="1" value="&#x2753;" onclick='tristate1(this)' />
            </td>
            <th>borderless text</th>
        </tr>
        <tr>
            <td>
                <input type="text" size="1" onfocus="this.blur()" readonly="true" value="&#x2753;" onclick="tristate1(this);" />
            </td>
            <th>text with border</th>
        </tr>
        <tr>
            <td>
                <input style="border: none;" type="text" name="tristate" id="tristate" readonly="true" size="1" value="&#9711;" onclick="switch(this.form.tristate.value.charAt(0)) { 
		           case '&#9711': this.form.tristate.value='&#9678;'; break;  
		           case '&#9678': this.form.tristate.value='&#9673;'; break; 
		           case '&#9673': this.form.tristate.value='&#9711;'; break; 
           };" />
                <th>text</th>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" onfocus="this.blur()" name="tristate_button" size="1" value="&#9711" onclick="switch(this.form.tristate_button.value.charAt(0)) {
		           case '&#9711':...

JavaScript

/*  */

function tristate1(control) {
    tristate(control, '\u2753', '\u2705', '\u274C');
}

function tristate2(control) {
    tristate(control, '\u25ef', '\u25ce', '\u25c9');
}

/**
 *  loops thru the given 3 values for the given control
 */
function tristate(control, value1, value2, value3) {
    switch (control.value.charAt(0)) {
        case value1:
            control.value = value2;
            break;
        case value2:
            control.value = value3;
            break;
        case value3:
            control.value = value1;
            break;
        default:
            // display the current value if it's unexpected
            alert(control.value);
    }
}