Gute Quer Browser Tri-State-Checkbox?

Question

Gute Quer Browser Tri-State-Checkbox?

stimmen

0

Hey Jungs, ich bin auf der Suche nach einem schönen Tri-State-Checkbox-Controller in JS? Haben Sie etwas mir zu empfehlen?

Die Zustände ich suche sind

Überprüft
ungehemmt
Indifferent (nie aktiviert / deaktiviert)

javascript user-controls checkbox cross-browser

Veröffentlicht am 29/07/2009 um 22:16
quelle vom benutzer Yarin Miran

In anderen Sprachen...

6 antworten

Peter Di Cecco · Answer 1 · 2009-07-29 22:19

stimmen

1

Verwenden Sie Radio-Buttons.

<input type="radio" name="tristate" value="checked" />Checked
<input type="radio" name="tristate" value="unchecked" />Unchecked

Falls keine, wenn die Funkgeräte eingeschaltet sind, dann haben Sie Ihren dritter „indifferent“ oder Nullzustand.

Beantwortet am 29/07/2009 um 22:19
quelle vom benutzer Peter Di Cecco

Wade · Answer 2 · 2009-07-29 22:20

stimmen

1

Sie können in EXTJS suchen.

Sie haben eine große Gemeinschaft, die oft Dinge wie diese baut, und ich bin sicher, wenn Sie sich für einen gegoogelt es kommen könnte. Eigentlich hier gehen Sie Sie in der Lage sein kann, ein paar Änderungen an dieser machen und es an die Arbeit, wie Sie wollen:

http://extjs.net/forum/showthread.php?t=28096

Hoffe das hilft!

Beantwortet am 29/07/2009 um 22:20
quelle vom benutzer Wade

Pyrolistical · Answer 3 · 2009-07-29 22:23

stimmen

0

Wenn Sie mehr als zwei Zustände benötigen, verwenden Sie dann 3 Radio-Buttons.

Nehmen Sie nicht an, wenn der Benutzer nichts ausgewählt hat den dritten Zustand bedeuten. Was passiert, wenn der Benutzer die Frage verpasst alle zusammen, oder versehentlich Hit einreichen?

Wenn Sie 3 Staaten wollen, haben dann drei Staaten!

Beantwortet am 29/07/2009 um 22:23
quelle vom benutzer Pyrolistical

Janus Troelsen · Answer 4 · 2012-09-28 23:49

stimmen

0

Verwenden HTML5 unbestimmte Eingabeelemente .

Beantwortet am 28/09/2012 um 23:49
quelle vom benutzer Janus Troelsen

xDaevax · Answer 5 · 2014-06-27 15:00

Ich entwickeln diese Lösung während an einem Projekt arbeiten. Es verwendet den unbestimmten Zustand von Kontrollkästchen (ein Attribut, das nicht von Auszeichnungs zugegriffen / eingestellt werden kann). In meinem Beispiel habe ich nur eine Ebene der Verschachtelung, aber es kann auf unbestimmte Zeit für Gruppen und Untergruppen zu ermöglichen, verschachtelt werden, um zu sein un, alle oder teilweise ausgewählt.

Die Grundstruktur dreht sich um das unbestimmte Attribut wie diese Manipulation:

<input type="checkbox" value="HasFavoriteColor" name="FavoriteColor" id="myCheckBox" />
<input type="hidden" id="FavoriteColorState" name="FavoriteColorState" /><!-- potential values: 0, 1, -1 -->

<script type="text/javascript">
    //using JQuery
    $("#myCheckBox").prop("indeterminate", true);

    //using pure javascript
    document.getElementById("myCheckBox").setAttribute("indeterminate", true);
</script>

Ich benutzte es für eine select-alle hier in meinem Beispiel, aber es könnte auf nur einem einzelnen Kontrollkästchen verwendet werden. Es ist wichtig zu wissen, dass dies nicht Zustand in einer post-zurück an den Server kommunizieren NIMMT. Ein Kontrollkästchen gesendet wird, ist immer noch wahr / falsch, so unbestimmt nur UI betrifft. Wenn Sie Werte brauchen, um wieder zu schreiben, müssen Sie den unbestimmten Zustand zu einem verborgenen Feld binden um den Wert zu beharren.

Für mehr auf dem unbestimmten Zustand, finden Sie in den folgenden Ressourcen:

Hier ist ein funktionierendes Beispiel (externe Geige): http://jsfiddle.net/xDaevax/65wZt/

Arbeitsbeispiel (Stack-Snippet):

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>

Timothy C. Quinn · Answer 6 · 2015-03-19 00:17

Ich habe eine Lösung über eine native Checkbox und die unbestimmte Eigenschaft verwenden und ein benutzerdefiniertes Attribut in den Checkbox Speichern den aktuellen Status zu erfassen eine effektive triple Zustand Checkbox zu erreichen.

Diese Lösung hat sich gut erprobt auf neueste Chrome und Firefox und Chrom (nw.js) unter Linux und IE 11, Firefox und Chrome auf Windohs.

Ich habe diese Lösung gepostet JSFiddle .

Hier ist das Dienstprogramm Singleton I verwendet:

tscb$ = {
     STATE_UNCHECKED: 0
    ,STATE_CHECKED: 1
    ,STATE_INDETER: 2
    ,setState:  function(o,iState){
        var t=this;
        if(iState==t.STATE_UNCHECKED){
            o.indeterminate=false; o.checked=false;
        } else if(iState==t.STATE_CHECKED){
            o.indeterminate=false; o.checked=true;
        } else if(iState==t.STATE_INDETER){
            o.checked=false; o.indeterminate=true;
        } else {
            throw new Error("Invalid state passed: `"+iState+"`")
        }
        o.setAttribute("tscbState", iState);
    }
    // Event to call when the cb is clicked to toggle setting.
    ,toggleOnClick:  function(o){
        var t=this, iNextState=t.getNextState(o)
        if(iNextState==t.STATE_UNCHECKED){
            o.checked=false;
        } else if(iNextState==t.STATE_CHECKED){
            o.checked=true;
        } else if(iNextState==t.STATE_INDETER){
            o.indeterminate=true;
        }
        o.setAttribute("tscbState", iNextState);
    }
    // For retrieval of next state 
    ,getNextState: function(o){
        var t=this, iState=t.getState(o)
        if(iState==t.STATE_UNCHECKED){
            return t.STATE_INDETER;
        } else if(iState==t.STATE_CHECKED){
            return t.STATE_UNCHECKED;
        } else if(iState==t.STATE_INDETER){
            return t.STATE_CHECKED;
        }
    }
    ,getState: function(o){
        return parseInt(o.getAttribute("tscbState"))
    }

}

Verwendung:

tscb $ .setState () wird verwendet, um eine Einstellung für eine Option zu initialisieren oder außer Kraft setzen
tscb $ .toggleOnClick () wird verwendet, wenn das Element angeklickt wird in den nächsten Zustand zu wechseln
tscb $ .getState () ist es, den aktuellen Status abrufen
tscb $ .getNextState () ist der nächste Zustand abrufen

Es ist erstaunlich, wie effektiv ein Triple Zustand Checkbox hält eine UI kompakt sein kann, während für einzigartige Filterfunktionalität ermöglicht. Es ist sehr effektiv für die dynamische Suchergebnis-Filterung, wo ein Filter Off mit nur einer Steuerung Wahr / Falsch / seine