अच्छा क्रॉस-ब्राउज़र त्रिकोणीय राज्य चेकबॉक्स?

var root = this;
root.selectedCount = 0;
root.totalCount = 0;
root.percentageSelected = 0.0;
root.holdTimer = 0;
jQuery.fn.customSelect = {
    State: 0,
    NextState: function () {
        this.State += 1;
        if (this.State > 2) {
            this.State = 0;
        } // end if
    } // end object
};

function checkAllToggle(parent, toggle) {
    if (parent != null && parent != undefined) {
        parent.find("input[type='checkbox']").prop("checked", toggle);
        for (var i = 0; i < parent.find("input[type='checkbox']").length; i++) {
            $(document).trigger("item-selected", {
                IsSelected: $(parent.find("input[type='checkbox']")[i]).prop("checked")
            });
        } // end for loop
    } // end if
} // end function checkAll
var fadeTimer = setInterval(function () {
    if (root.holdTimer > 0) {
        root.holdTimer -= 1;
    } else {
        root.holdTimer = -2;
    } // end if/else
    if (root.holdTimer == -2) {
        $(".options-status").fadeOut("easeOutBack");
        root.holdTimer = -1;
    } // end if/else
}, 50);
$(function () {
    root.totalCount = $(document).find(".options-list input[type='checkbox']").length;
    $(document).bind("select-state-change", function (e, data) {
        switch (data.State) {
            case 0:
                data.Target.prop("checked", false);
                data.Target.prop("indeterminate", false);
                checkAllToggle($(".options-list"), false);
                break;
            case 1:
                data.Target.prop("indeterminate", true);
                e.preventDefault();
                break;
            case 2:
                data.Target.prop("checked", true);
                data.Target.prop("indeterminate", false);
                checkAllToggle($(".options-list"), true);
                break;
        }

    });
    $(document).bind("item-selected", function (e, data) {
        root.holdTimer = 50;
        if (data != null && data != undefined) {
            if (data.IsSelected) {
                root.selectedCount += 1;
            } else {
                root.selectedCount -= 1;
            } // end if/else
            if (root.selectedCount > root.totalCount) {
                root.selectedCount = root.totalCount;
            } // end if
            if (root.selectedCount < 0) {
                root.selectedCount = 0;
            } // end if
            root.percentageSelected = (100 * (root.selectedCount / root.totalCount));
            root.percentageSelected < 50 && root.percentageSelected >= 0 ? $(".options-status").removeClass("finally-there").removeClass("almost-there").addClass("not-there", 200) : false;
            root.percentageSelected < 100 && root.percentageSelected >= 50 ? $(".options-status").removeClass("not-there").removeClass("finally-there").addClass("almost-there", 200) : false;
            root.percentageSelected == 100 ? $(".options-status").removeClass("not-there").removeClass("almost-there").addClass("finally-there", 200) : false;
            $(".options-status .output").text(root.percentageSelected + "%");
            setTimeout(function () {
                $(".options-status").fadeIn("easeInBack");
            }, 100);
        } // end if
    });
    $("#select-all").click(function (e) {
        var checkbox = $(this);
        if (checkbox.prop("checked") == true) {
            checkbox.customSelect.State = 2;
        } else {
            checkbox.customSelect.State = 0;
        } // end if/else
        $(document).trigger("select-state-change", {
            State: checkbox.customSelect.State,
            Target: $("#select-all")
        });
    });
    $("input[name='options']").each(function () {
        $(this).click(function () {
            if ($(this).prop("checked") == true) {
                $(document).trigger("item-selected", {
                    IsSelected: true
                });
                if ($(this).parent().parent().find("input[type='checkbox']:checked").length == $(this).parent().parent().find("input[type='checkbox']").length) {
                    $(document).trigger("select-state-change", {
                        State: 2,
                        Target: $("#select-all")
                    });
                } else {
                    $(document).trigger("select-state-change", {
                        State: 1,
                        Target: $("#select-all")
                    });
                } // end if/else
            } else {
                $(document).trigger("item-selected", {
                    IsSelected: false
                });
                if ($(this).parent().parent().find("input[type='checkbox']:checked").length <= 0) {
                    $(document).trigger("select-state-change", {
                        State: 0,
                        Target: $("#select-all")
                    });
                } else {
                    $(document).trigger("select-state-change", {
                        State: 1,
                        Target: $("#select-all")
                    });
                } // end if/else
            } // end if/else
        });
    });
});

body {
    font-family: Helvetica, Verdana, Sans-Serif;
    font-size: small;
    color: #232323;
    background-color: #efefef;
    padding: 0px;
    margin: 0px;
}
H1 {
    margin-top: 2px;
    text-align: center;
}
LEGEND {
    margin-bottom: 6px;
}
.content-wrapper {
    padding: 2px;
    margin: 3px auto;
    width: 100%;
    max-width: 500px;
    min-width: 250px;
}
.wrapper {
    padding: 3px;
    margin: 2px;
}
.container {
    border-right: solid 1px #788967;
    border-bottom: solid 1px #677867;
    border-top: solid 1px #89ab89;
    border-left: solid 1px #89ab89;
}
.rounded {
    border-radius: 2px;
}
.contents {
    background: linear-gradient(rgba(255, 255, 255, 1), rgba(180, 180, 180, .2));
}
.header {
    padding: 4px;
    border: solid 1px #000000;
    background-color: rgba(200, 200, 230, .8);
    font-size: 123%;
    background-image: linear-gradient(rgba(220, 220, 255, .8), rgba(200, 200, 230, .8));
}
#options-chooser {
    margin-top: 30px;
    display: block;
}
#options-chooser .options-list > LABEL {
    display: table-row;
    height: 26px;
}
.red {
    color: red;
}
.blue {
    color: blue;
}
.green {
    color: green;
}
.black {
    color: black;
}
.options-status {
    float: right;
    right: 3%;
    clear: both;
    display: none;
    margin-top: -20px;
}
.output {
    font-weight: bold;
}
.not-there {
    border-color: rgba(190, 190, 190, .3);
    background-color: rgba(190, 190, 190, .1);
}
.almost-there {
    border-color: rgba(220, 220, 50, .6);
    background-color: rgba(220, 220, 50, .3);
}
.finally-there {
    border-color: rgba(50, 190, 50, .3);
    background-color: rgba(50, 190, 50, .1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<div class="content-wrapper">
    <div class="wrapper container rounded">
        <div class="contents">
             <h1 class="header rounded">Partial Select All Example</h1>

            <p>This example demonstrates how to implement a tri-state checkbox with options.</p>
            <form name="options-chooser" id="options-chooser" method="post">
                <fieldset class="rounded options">
                    <legend class="rounded header">Options
                        <input type="checkbox" value="options-all" name="selectAll" id="select-all" title="Select All" />
                    </legend> <span class="options-status rounded container wrapper">Items Selected: <span class="output"></span></span>
                    <div class="options-list">
                        <label class="blue">
                            <input type="checkbox" name="options" value="1" />Blue</label>
                        <label class="green">
                            <input type="checkbox" name="options" value="2" />Green</label>
                        <label class="red">
                            <input type="checkbox" name="options" value="3" />Red</label>
                        <label class="black">
                            <input type="checkbox" name="options" value="4" />Black</label>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>