具有不确定状态的问号的三态复选框插件

debugcn 发表于 Dev

纪尧姆·蒙施（Guillaume Munsch）

我正在开发一个网站，并且一直在寻找一个插件，该插件可以让我使用三个状态复选框。

不幸的是，我发现的所有内容（如此处：http : //extremefe.github.io/bootstrap-checkbox/）都具有“不确定”状态，为实心方块或破折号。我要把它当作一个问号?

有人对此有解决方案吗？

Praveen Kumar Purushothaman

您不能?作为的别名null。

简而言之，此插件使用三个关键字来确定复选框的三种状态，即：

已检查： true
未选中： false
中间的： null

所有这些都不等于undefined，从技术上讲，这不是nullJavaScript，可以用于boolean操作。要使用此插件，您只需要包括jQuery插件：

<script src="jquery.js"></script>
<script src="bootstrap-checkbox.js"></script>

要使用三态复选框，您只需要首先创建一个复选框：

<input type="checkbox" name="myCheck" id="myCheck" />

然后将其设为三态一：

$("#myCheck").checkbox().chbxChecked(null);

要从中获取值：

switch ($("#checkbox2").chbxChecked()) {
    case true:
        console.log("Checkbox is Checked!");
        break;
    case false:
        console.log("Checkbox is Unhecked!");
        break;
    case null:
        console.log("Checkbox is in the Intermediate!");
        break;
}

您可以在此处获得完整的代码：

$(document).ready( function () {
    $("#myCheck").checkbox().chbxChecked(null);
    switch ($("#checkbox2").chbxChecked()) {
        case true:
            console.log("Checkbox is Checked!");
            break;
        case false:
            console.log("Checkbox is Unhecked!");
            break;
        case null:
            console.log("Checkbox is in the Intermediate!");
            break;
    }
});

并将图标从更改icon-stop为icon-question，请bootstrap-checkbox.js在行号上编辑源文件37：

if (checked === null) {
  element.addClass('ambiguous');
  element.html('<i class="icon-stop"></i>');
} else if (checked) {

并将其更改为：

if (checked === null) {
  element.addClass('ambiguous');
  element.html('<i class="icon-question"></i>');
} else if (checked) {

希望这可以帮助！

小提琴：

/**
 * bootstrap-checkbox.js
 * (c) 2013~ Jiung Kang
 * Licensed under the Apache License, Version 2.0 (the "License");
 */

(function($) {
  "use strict";

  var replaceCheckboxElement = function(checkbox, element) {
    var value = element.val(),
        id = element.attr('id'),
        className = element.attr('class'),
        style = element.attr('style'),
        checked = !!element[0].checked,
        welNew = $('<div></div>');

    element.replaceWith(welNew);

    if (id) { welNew.attr('id', id) }
    if (className) { welNew.attr('class', className) }
    welNew.addClass('bootstrap-checkbox');
    if (style) { welNew.attr('style', style); }
    if (checked) { welNew.addClass('checked'); }

    checkbox.value = value;
    checkbox.checked = checked;
    checkbox.element = welNew;
  };

  var changeCheckView = function(element, checked) {
    element.removeClass('ambiguous');
    element.removeClass('checked');

    if (checked === null) {
      element.addClass('ambiguous');
      element.html('<i class="icon-question-sign"></i>');
    } else if (checked) {
      element.addClass('checked');
      element.html('<i class="icon-ok"></i>');
    } else {
      element.html('');
    }
  };

  var attachEvent = function(checkbox, element) {
    element.on('click', function(e) {
      var checked;
      if (checkbox.checked) {
        checked = false;
      } else if (checkbox.checked === false && checkbox.ambiguous === true){
        checked = null;
      } else {
        checked = true;
      }

      checkbox.checked = checked;
      changeCheckView(checkbox.element, checked);

      checkbox.element.trigger({
        type: 'check',
        value: checkbox.value,
        checked: checked,
        element: checkbox.element
      });
    });
  };

  var Checkbox = function(element, options) {
    replaceCheckboxElement(this, element);
    attachEvent(this, this.element);
    if (options && options.label) {
      attachEvent(this, $(options.label));
    }
  };

  $.fn.extend({
    checkbox : function(options) {
      var aReplaced = $(this.map(function () {
        var $this = $(this),
            checkbox = $this.data('checkbox');

        if (!checkbox) {
          checkbox = new Checkbox($this, options);
          checkbox.element.data('checkbox', checkbox);
        }

        return checkbox.element[0];
      }));

      aReplaced.selector = this.selector;
      return aReplaced;
    },

    chbxVal : function(value) {
      var $this = $(this[0]);
      var checkbox = $this.data('checkbox');

      if (!checkbox) {
        return;
      }
      if ($.type(value) === "undefined") {
        return checkbox.value;
      } else {
        checkbox.value = value;
        $this.data('checkbox', checkbox);
      }
    },

    chbxChecked : function(checked) {
      var $this = $(this[0]);
      var checkbox = $this.data('checkbox');

      if (!checkbox) {
        return;
      }
      if ($.type(checked) === "undefined") {
        return checkbox.checked;
      } else {
        checkbox.ambiguous = checked === null;
        changeCheckView($this, checked);

        checkbox.checked = checked;
        $this.data('checkbox', checkbox);
      }
    }
  });
})(jQuery);
$(document).ready(function () {
  $("#myCheck").checkbox().chbxChecked(null);
});

@import url("http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
@import url("http://extremefe.github.io/bootstrap-checkbox/css/bootstrap-checkbox.css");
body {font-family: 'Segoe UI'; margin: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
  <input type="checkbox" name="myCheck" id="myCheck" /> Click Me!
</label>

查看上面的工作演示！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。