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

Question

我正在开发一个网站，我一直在寻找一个允许我使用三个状态复选框的插件。

不幸的是，我发现的所有内容(如此处:http://extremefe.github.io/bootstrap-checkbox/)都有其“不确定”状态，如完整的正方形或破折号。我需要它是一个问号 ?

有人有办法解决这个问题吗？

Answer 1

您不能将 ? 作为 null 的别名。

简单来说，这个插件使用三个关键字来确定复选框的三种状态，即:

• 检查:true
• 未选中:false
• 中级:null

所有这些都不等同于 undefined，它在 JavaScript 中技术上不是 null，可以用于 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) {

希望这对您有所帮助!

fiddle :

/**
 * 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>

查看上面的工作演示!