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_
    Commented 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 Commented 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 Commented 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_
    Commented 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. Commented 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_
    Commented 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
    Commented 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. Commented el 29 dic. 2016 a las 7:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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