19

Como utilizo bootstrap me busqué este estilo para realizarlo más amigable al usuario, puesto que en ellos represento botones con estados true y false.

Lo realizo de la siguiente manera:

  $(function() {
    $('#toggle-event').change(function() {
      $('#console-event').html('Estado: ' + $(this).prop('checked'))
    })
  })
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input type="checkbox" id="toggle-event" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">
<div id="console-event">Estado: true</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Yo quisiera que tuviera un tercer estado que es null. ¿Existe la posibilidad? O si existe otra herramienta que si me da esa opción bienvenida sea la sugerencia.

3 respuestas 3

11

Un checkbox con 3 estados:

var $check = $("input[type=checkbox]");
var el;

$check.data('checked', 0).on('click', function() {

    el = $(this);

    switch (el.data('checked')) {

      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', true);
        console.log('null');
        break;

      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        console.log('true');
        break;

      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);
        console.log('false');
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="">

Fuente: Rotating amongst the states

UPDATE:

Usando el código anterior, he añadido algo de estilo a los checkbox:

function stateCheckBox(checkBox) {
    
    var el = checkBox;
    var status = 0;
    
    switch (el.data('checked')) {
        
        case 0:
            el.data('checked', 1);
            el.prop('indeterminate', false);
            el.prop('checked', true);
            status = true;
            break;
        
        case 1:
            el.data('checked', 2);
            el.prop('indeterminate', false);
            el.prop('checked', false);
            status = false;
            break;
    
        default:  
            el.data('checked', 0);
            el.prop('indeterminate', true);
            status = null;
    }
    
    return status;
}

$('.checkbox').on('click', function() {
    
    var $this = $(this);
    var status = stateCheckBox($this.prev());
    var statusTxt = '';
    
    switch (status) {
        
        case true:
    
            $this
                .removeClass('checkbox false')                
                .removeClass('checkbox null')
                .addClass('checkbox true');
    
            statusTxt = 'true';
            //console.log('true');
            break;
        
        case false:
            
            $this
                .removeClass('checkbox true')
                .removeClass('checkbox null')
                .addClass('checkbox false');
    
            statusTxt = 'false';
            //console.log('false');
            break;
        
        default:
    
            $this
                .removeClass('checkbox true')
                .removeClass('checkbox false')
                .addClass('checkbox null');
    
            statusTxt = 'null';
            //console.log('null');
    }
    
    $this.prev().prev().text('Estado: ' + statusTxt);
});
body {
  background-color: #000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type=checkbox] {
  display: none;
}

.checkbox {
  width: 80px;
  height: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  transition: all .2s linear;
}

.checkbox:after {
  content: '';
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -2px;
}

.checkbox.true {
  background-color: #0f0;
}

.checkbox.true:after {
  left: -2px;
}

.checkbox.false {
  background-color: #f00;
}

.checkbox.false:after {
  right: -2px;
}

.checkbox.null {
  background-color: #ff0;
}

.checkbox.null:after {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.estado {
  color: #fff;
  margin: 15px 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Por defecto: Estado null -->
<p class="estado">Estado: null</p>
<input type="checkbox" name="checkbox" value="" data-checked="0">
<div class="checkbox checkbox null"></div>

<!-- Por defecto: Estado true -->
<p class="estado">Estado: true</p>
<input type="checkbox" name="checkbox" value="" data-checked="1">
<div class="checkbox checkbox true"></div>

<!-- Por defecto: Estado false -->
<p class="estado">Estado: false</p>
<input type="checkbox" name="checkbox" value="" data-checked="2">
<div class="checkbox checkbox false"></div>

3
  • gracias por tu respuesta, lo único que le falta es un poquito de css pero es lo que pedí, gracias hermano.
    – bypabloc_
    el 28 dic. 2016 a las 15:25
  • 1
    @PabloContreras - Denada... hoy no he tenido más tiempo pero estos días mejoraré la respuesta... saludos el 28 dic. 2016 a las 15:36
  • @PabloContreras - he actualizado mi respuesta dejando te un ejemplo como se podría dar estilo a los checkbox... saludos el 29 dic. 2016 a las 15:01
6

Una opción es con CSS Toggle Switch:

$(document).ready(function() {
    $('.mostrar-valor').change(function() {
        $('#console-event').html(
            'Estado: ' + $('input[name=view]:checked').val()
        )
    });
});
<!-- Toggle-switch -->
<link href="http://ghinda.net/css-toggle-switch/dist/toggle-switch.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- HTML -->
<fieldset>
    <legend>Estado</legend>
    <div class="switch-toggle switch-candy">
        <input id="true" name="view" type="radio" class="mostrar-valor" value="True">
        <label for="true" onclick="">Activo</label>

        <input id="null" name="view" type="radio" checked class="mostrar-valor" value="Null">
        <label for="null" onclick="">Null</label>

        <input id="false" name="view" type="radio" class="mostrar-valor" value="False">
        <label for="false" onclick="">Inactivo</label>

        <a></a>
    </div>
</fieldset>

<div id="console-event">Estado: Null</div>

3

Te voy a mostrar como crear un checkbox personalizado con tres estados utilizando CSS con algo de Javascript. Tu le podrás añadir posteriormente estilos de Bootstrap si así lo deseas.

En primer lugar, a un checkbox no se le pueden asignar estilos por defecto por lo que, en vez de a él, crearemos una label y se la asignaremos al checkbox mediante el atributo for para poder asignarle los estilos a dicha label. El checkbox original permanecerá oculto.

Después, tendremos que definir los posibles estados en los que se va a encontrar el checkbox:

0 --> true --> Color verde
1 --> false --> Color rojo
2 --> nulo --> Color amarillo

Y tendremos que definir también las posibles combinaciones:

0 --> 2 --> 1
1 --> 2 --> 0

Es decir, siempre pasará por el estado nulo antes de obtener un estado u otro (true/false).

Posteriormente, podremos usar checkbox.indeterminate = true para recrear que el checkbox está en estado nulo y guardaremos el estado siguiente y actual que le corresponde al estado actual del checkbox para posteriormente poder realizar una acción u otra. Para guardar los estados crearemos un par de atributos data- donde, en este caso, he llamado numero para el estado siguiente y actual para guardar el estado que tiene en el momento de hacer click sobre el checkbox.

Por último, podremos usar los selectores :checked, :indeterminate, + y algo de Javascript para hacer el resto. Con Javascript crearemos un evento que escuche cuando el checkbox cambie de estado.

Ejemplo completo:

var checkbox = document.getElementById('checkbox');

checkbox.addEventListener("change", comprueboCheck, false); 

function comprueboCheck(){
  var siguienteTrue = false;
  var texto = document.getElementById('console-event');
  
  switch(checkbox.dataset.numero){
      case "0":
          checkbox.dataset.numero = "2";
          checkbox.dataset.actual = "0";
          checkbox.checked = true;
          texto.innerHTML = 'Estado: True';
          break;
      case "1":
          checkbox.dataset.numero = "2";
          checkbox.dataset.actual = "1";
          checkbox.checked = false;
          texto.innerHTML = 'Estado: False';
          break;
      case "2":
          checkbox.indeterminate = true;
          if(checkbox.dataset.actual == "0"){
              checkbox.dataset.numero = "1";
          }else{
              checkbox.dataset.numero = "0"
          }
          texto.innerHTML = 'Estado: Nulo';
          break;
  }
}
input[type="checkbox"]{
  display: none;
}

input[type="checkbox"] + label{
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: red;
  border-radius: 5px;
}

input[type="checkbox"]:indeterminate + label{
  background-color: yellow;
}

input[type="checkbox"]:checked + label{
  background-color: green;
}
<input id="checkbox" data-numero="2" data-actual="1" type="checkbox"/>
<label for="checkbox"></label>

<div id="console-event">Estado: False</div>

6
  • gracias por tu respuesta, lo único que le falta es volver al estado "indeterminate ".
    – bypabloc_
    el 28 dic. 2016 a las 15:23
  • 1
    @PabloContreras ¿A que te refieres con que lo único que le falta es volver al estado "indeterminate"? ¿Te refieres a un mismo checkbox? Yo te lo he separado en tres diferentes para que se vieran cada uno de los estados. Luego a partir de ahí ya puedes jugar con las diferentes combinaciones usando Javascript. el 28 dic. 2016 a las 15:25
  • si exactamente eso pero es como tu dices, con eso ya puedo trabajar el javascript yo mismo, no sabia lo de "indeterminate" gracias.
    – bypabloc_
    el 28 dic. 2016 a las 15:28
  • 1
    Muy interesante cómo escondiste el checkbox y sólo usás el label. +1. Me parece que quedaría mejor que el cambio sea circular en vez de siempre pasar por null (sólo una opinión)
    – Mariano
    el 29 dic. 2016 a las 6:53
  • 1
    @Mariano ¿Te refieres a que pase directamente de false a true? Esa fue la primera opción que pensé. Sin embargo, me pareció más interesante mostrar el ciclo t-n-f / f-n-t porque vi que tenía algo más de complejidad. Luego por supuesto el OP será libre de poner los estados como a él más le guste simplemente cambiando un poco el switch. el 29 dic. 2016 a las 7:34

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.