Buena casilla de verificación de tres estados de navegador cruzado?

Question

Buena casilla de verificación de tres estados de navegador cruzado?

votos

0

Hola chicos, estoy buscando un buen controlador de casilla tri-estado en JS? ¿Tienes algo que recomendarme?

Los estados que estoy buscando son

Comprobado
Desenfrenado
Indiferente (nunca fue marcado / desmarcado)

javascript user-controls checkbox cross-browser

Publicado el 29/07/2009 a las 22:16
fuente por usuario Yarin Miran

En otros idiomas...

6 respuestas

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

votos

1

Use botones de radio

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

Si ninguno está activado, entonces tiene su tercer estado "indiferente" o nulo.

Respondida el 29/07/2009 a las 22:19
fuente por usuario Peter Di Cecco

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

votos

1

Es posible que desee examinar EXTJS.

Tienen una gran comunidad que a menudo construye cosas como esta y estoy seguro de que si buscas en Google podría surgir. De hecho, aquí tienes, puedes hacer algunos cambios y hacer que funcione como quieras:

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

¡Espero que esto ayude!

Respondida el 29/07/2009 a las 22:20
fuente por usuario Wade

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

votos

0

Si necesita más de dos estados, use 3 botones de opción.

No suponga que el usuario no seleccionó nada para indicar el tercer estado. ¿Qué pasa si el usuario se perdió la pregunta todos juntos, o presionó enviar por error?

Si quieres 3 estados, ¡entonces tienes 3 estados!

Respondida el 29/07/2009 a las 22:23
fuente por usuario Pyrolistical

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

votos

0

Utilice elementos de entrada indeterminado HTML5 .

Respondida el 28/09/2012 a las 23:49
fuente por usuario Janus Troelsen

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

He desarrollado esta solución mientras se trabaja en un proyecto. Se utiliza el estado indeterminado de casillas de verificación (un atributo que no se puede acceder a / set de marcado). En mi ejemplo, tengo un solo nivel de anidamiento pero se pueden anidar indefinidamente para permitir a los grupos y subgrupos de ser de las Naciones Unidas, todos, o parcialmente seleccionado.

La estructura básica gira en torno a manipular el atributo indeterminada de esta manera:

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

Lo utilicé para unos, todo aquí en mi ejemplo, pero podría ser utilizado en sólo una casilla individual. Es importante saber que esto no se comunican en un estado posterior a la vuelta al servidor. Una casilla de verificación está publicado todavía es verdadero / falso de manera indeterminada sólo afecta a la interfaz de usuario. Si usted necesita para enviar valores de nuevo, tendrá que atar el estado indeterminado a algún campo oculto para conservar el valor.

Para más información sobre el estado indeterminado, consulte los siguientes recursos:

Aquí está un ejemplo de trabajo (violín externo): http://jsfiddle.net/xDaevax/65wZt/

Ejemplo de trabajo (Stack Fragmento):

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

Tengo una solución utilizando una casilla de verificación nativo y la propiedad indeterminada y almacenar un atributo personalizado en la casilla de verificación para capturar el estado actual de lograr una casilla de verificación del estado de triple eficaz.

Esta solución ha probado bien en la última Chrome y Firefox y cromo (nw.js) en Linux e IE 11, Firefox y Chrome en Windohs.

He publicado esta solución a jsFiddle .

Aquí está el singleton utilidad utilicé:

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 () se utiliza para inicializar o redefinir un valor para una casilla de verificación
tscb $ .toggleOnClick () se utiliza cuando se hace clic en el elemento para cambiar al siguiente estado
tscb $ .getState () es para recuperar el estado actual
tscb $ .getNextState () es para recuperar el estado siguiente

Es sorprendente la eficacia de una casilla de verificación de triple estado puede ser en el mantenimiento de una interfaz de usuario compacta permitiendo al mismo tiempo la función de filtro único. Es muy eficaz para el filtrado de resultados de búsqueda dinámica en la que un filtro puede ser Verdadero / Falso / apagado con un único mando