Goede Cross-browser tri-state checkbox?

Question

Goede Cross-browser tri-state checkbox?

stemmen

0

Hey guys, ik ben op zoek naar een leuke tri-state checkbox controller in JS? Heb je iets aan te bevelen me?

De Staten Ik ben op zoek naar zijn

gecontroleerd
ongehinderd
Onverschillig (Werd nooit gecontroleerd / ongecontroleerd)

javascript user-controls checkbox cross-browser

De vraag is gesteld op 29/07/2009 om 22:16
bron van user Yarin Miran

In andere talen...

6 antwoorden

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

stemmen

1

Gebruik radio knoppen.

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

Als geen als de radio's zijn ingeschakeld, dan heb je je derde "onverschillig" of nul staat.

antwoordde op 29/07/2009 om 22:19
bron van user Peter Di Cecco

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

stemmen

1

U kunt kijken naar ExtJS.

Ze hebben een grote gemeenschap die vaak bouwt dit soort dingen en ik weet zeker dat als je googled één zou kunnen komen. Eigenlijk hier ga je je in staat zijn om een paar veranderingen om dit te maken en krijgen om te werken hoe u wilt:

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

Ik hoop dat dit helpt!

antwoordde op 29/07/2009 om 22:20
bron van user Wade

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

stemmen

0

Als u meer dan twee staten nodig hebt, gebruik dan 3 radio knoppen.

Denk niet dat als de gebruiker niets aan de derde toestand betekenen heeft geselecteerd. Wat gebeurt er als de gebruiker de vraag gemist allemaal samen, of druk op te leggen per ongeluk?

Als u wilt 3 staat, dan heb 3 toestanden!

antwoordde op 29/07/2009 om 22:23
bron van user Pyrolistical

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

stemmen

0

Gebruik HTML5 onbepaalde invoerelementen .

antwoordde op 28/09/2012 om 23:49
bron van user Janus Troelsen

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

Ik ontwikkelde deze oplossing tijdens het werken aan een project. Het maakt gebruik van de onbepaalde toestand van de vakjes (een kenmerk dat niet kan worden benaderd / ingesteld van markup). In mijn voorbeeld, ik heb slechts één niveau van nesten, maar het kan oneindig worden genest om voor groepen en subgroepen un te zijn, alle, of gedeeltelijk geselecteerd.

De basisstructuur draait om het manipuleren van de onbepaalde attribuut als volgt uit:

<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>

Ik gebruikte het voor een select-all hier in mijn voorbeeld, maar het kan gebruikt worden op een eenvoudige particulier checkbox. Het is belangrijk om te weten dat dit niet de staat in een post-back naar de server communiceert. Een checkbox wordt geplaatst is nog steeds waar / niet waar dus onbepaald alleen van invloed op UI. Als u nodig hebt om waarden terug te plaatsen, moet u de onbepaalde staat te koppelen aan een aantal verborgen veld om de waarde te blijven.

Voor meer informatie over het onbepaalde staat, zie de volgende bronnen:

Hier is een werkend voorbeeld (extern fiddle): http://jsfiddle.net/xDaevax/65wZt/

Werkvoorbeeld (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

Ik heb een oplossing met behulp van een native checkbox en de onbepaalde eigendom en het opslaan van een aangepast kenmerk in het vakje om de huidige status vast te leggen om een effectieve checkbox triple toestand te bereiken.

Deze oplossing is goed getest op de nieuwste Chrome en Firefox en chroom (nw.js) op Linux en IE 11, Firefox en Chrome op Windohs.

Ik heb deze oplossing geplaatst JSFiddle .

Hier is het nut Singleton ik gebruikte:

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"))
    }

}

Gebruik:

tscb $ .setState () wordt gebruikt om te initialiseren of overschrijven van een setting voor een checkbox
tscb $ .toggleOnClick () wordt gebruikt wanneer het element wordt geklikt om te schakelen naar de volgende status
tscb $ .getState () is om de huidige status op te halen
tscb $ .getNextState () is naar de volgende toestand te halen

Het is verbazingwekkend hoe effectief een triple checkbox staat kan zijn op het houden van een UI compact en tegelijkertijd zorgen voor unieke filtering functionaliteit. Het is zeer effectief voor dynamische zoekresultaat filteren, waar een filter True / False / Off met slechts een controle kan zijn