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

如何使用引导程序创建具有 3 种状态（真、空、假）的复选框？

  • 772

由于我使用引导程序，因此我寻找这种样式以使其更加用户友好，因为我用状态true和false.

我通过以下方式进行操作：

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

我希望它有第三种状态，即null. 有可能吗？或者，如果有其他工具可以为我提供该选项，欢迎提出建议。

javascript

3 Answers

  1. Best Answer

    具有 3 种状态的复选框：

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

    资料来源：在各州之间轮换

    更新：

    使用上面的代码，我添加了一些样式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. 一种选择是使用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. 我将向您展示如何使用some创建checkbox具有三种状态的自定义。如果您愿意，您可以稍后添加 Bootstrap 样式。CSSJavascript

    首先，checkbox默认情况下无法将样式分配给a，因此，我们将创建一个label并checkbox通过属性将其分配给他for，以便能够将样式分配给所述标签。原件将checkbox保持隐藏。

    然后，我们必须定义可以找到复选框的可能状态：

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

    我们还必须定义可能的组合：

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

    也就是说，在获得一种或另一种状态（真/假）之前，它总是会经历空状态。

    稍后，我们可以使用checkbox.indeterminate = true它来重新创建复选框处于某个状态nulo，并且我们将保存与复选框当前状态相对应的下一个当前状态，以便以后能够执行一个或另一个操作。为了保存状态，我们将创建几个属性data-，在这种情况下，我已经调用numero了下一个状态并actual保存它在单击复选框时的状态。

    最后，我们可以使用选择器:checked、:indeterminate和+一些Javascript来完成剩下的工作。我们将创建一个在Javascript复选框更改状态时监听的事件。

    完整示例：

    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