Buona Cross-Browser casella di tri-state?

Question

Buona Cross-Browser casella di tri-state?

voti

0

Hey ragazzi, sto cercando un bel controllo casella di controllo tri-state in JS? Hai qualcosa da raccomandare me?

Gli stati che sto cercando sono

verificato
non verificato
Indifferente (Non è mai stato controllato / incontrollato)

javascript user-controls checkbox cross-browser

È pubblicato 29/07/2009 alle 22:16
fonte dall'utente Yarin Miran

In altre lingue...

6 risposte

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

voti

1

Utilizzare i pulsanti di opzione.

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

Se nessuno se le radio sono accesi, allora avete il vostro terzo o stato nullo "indifferente".

Risposto il 29/07/2009 a 22:19
fonte dall'utente Peter Di Cecco

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

voti

1

Si consiglia di guardare in ExtJS.

Hanno una grande comunità che spesso costruisce cose come questa e sono sicuro che se si Googled per una potrebbe venire. In realtà qui si va si può essere in grado di fare alcune modifiche a questo e farlo funzionare come si desidera:

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

Spero che questo ti aiuti!

Risposto il 29/07/2009 a 22:20
fonte dall'utente Wade

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

voti

0

Se avete bisogno di più di due stati, quindi utilizzare 3 pulsanti di opzione.

Non date per scontato se l'utente non ha selezionato nulla a significare il terzo stato. Che cosa succede se l'utente ha mancato la questione tutti insieme, o colpire presentare per errore?

Se si desidera che 3 stati, poi hanno 3 stati!

Risposto il 29/07/2009 a 22:23
fonte dall'utente Pyrolistical

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

voti

0

Utilizzare elementi di input indeterminato HTML5 .

Risposto il 28/09/2012 a 23:49
fonte dall'utente Janus Troelsen

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

Ho sviluppato questa soluzione mentre si lavora su un progetto. Si utilizza lo stato indeterminato di caselle (un attributo che non accessibile / set da markup). Nel mio esempio, ho un solo livello di nidificazione, ma possono essere nidificate a tempo indeterminato per consentire a gruppi e sottogruppi di essere un, tutto, o in parte selezionati.

La struttura di base ruota attorno manipolare l'attributo indeterminata in questo modo:

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

L'ho usato per un prescelto, tutti qui nel mio esempio, ma potrebbe essere usato solo su una casella di controllo individuale. E 'importante sapere che questa non comunica stato in un post-back al server. Una casella di essere pubblicati è ancora vero / falso in modo indeterminato riguarda solo UI. Se è necessario inserire i valori di nuovo, si dovrà legare lo stato indeterminato in qualche campo nascosto a persistere il valore.

Per maggiori informazioni sulla stato indeterminato, vedere le seguenti risorse:

Ecco un esempio di lavoro (violino esterno): http://jsfiddle.net/xDaevax/65wZt/

Esempio di lavoro (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

Ho una soluzione che utilizza una casella di controllo nativo e la proprietà indeterminato e la memorizzazione di un attributo personalizzato nella casella di controllo per acquisire lo stato corrente per ottenere una casella di controllo efficace dello stato tripla.

Questa soluzione ha testato bene sulla più recente Chrome e Firefox e cromo (nw.js) su Linux e IE 11, Firefox e Chrome su Windohs.

Ho postato questa soluzione per JSFiddle .

Ecco l'utilità di Singleton che ho usato:

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

}

Uso:

tscb $ .setState () viene utilizzato per inizializzare o modificare un'impostazione per una casella di controllo
tscb $ .toggleOnClick () viene utilizzato quando l'elemento viene cliccato per alternare allo stato successivo
tscb $ .getState () è quello di recuperare lo stato attuale
tscb $ .getNextState () è quello di recuperare lo stato successivo

La sua sorprendente efficacia una casella tripla stato può essere a mantenere un utente compatta pur consentendo funzionalità di filtraggio unico. E 'molto efficace per la dinamica di filtraggio risultato di ricerca in cui un filtro può essere Vero / Falso / Off con un solo comando