Home / Questions / 41310
Accepted
bypabloc_
Asked: 2020-12-28 22:31:46 +0800 CST 2020-12-28 22:31:46 +0800 CST

How can I create a checkbox with 3 states (true, null, false) with bootstrap?

  • 772

Since I use bootstrap, I looked for this style to make it more user-friendly, since I represent buttons with states trueand false.

I do it in the following way:

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

I would like it to have a third state, which is null. There's a possibility? Or if there is another tool that gives me that option, welcome the suggestion.

javascript

3 Answers

  1. Best Answer

    A checkbox with 3 states:

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

    Source: Rotating amongst the states

    UPDATE:

    Using the code above, I've added some styling to the 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>

    • 11

  2. One option is with 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>

    • 6

  3. I'm going to show you how to create a checkboxcustom with three states using CSSsome Javascript. You can later add Bootstrap styles if you wish.

    In the first place, checkboxstyles cannot be assigned to a by default so, instead of him, we will create one labeland assign it to him checkboxthrough the attribute forto be able to assign the styles to said label. The checkboxoriginal will remain hidden.

    Then, we will have to define the possible states in which the checkbox will be found:

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

    And we will also have to define the possible combinations:

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

    That is, it will always go through the null state before getting one state or another (true/false).

    Later, we can use checkbox.indeterminate = trueit to recreate that the checkbox is in a state nuloand we will save the next and current state that corresponds to the current state of the checkbox to later be able to perform one action or another. To save the states we will create a couple of attributes data-where, in this case, I have called numerofor the next state and actualto save the state that it has at the moment of clicking on the checkbox.

    Lastly, we can use the selectors :checked, :indeterminate, +and some Javascriptto do the rest. With Javascriptwe will create an event that listens when the checkbox changes state.

    Full example:

    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>

    • 3