三状态复选框插件与不确定状态作为问号

Question

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

不幸的是，我发现的所有东西（如：http://extremefe.github.io/bootstrap-checkbox/）都将它们的“不确定”状态视为完整正方形或短划线。我需要它是一个问号?

有没有人有解决这个问题？

Answer 1

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

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

• 经过：true
• 未选中：false
• 中级：null

所有这些不等于undefined，这在技术上不是null我n JavaScript并可用于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，请编辑源文件，就行号37bootstrap-checkbox.js：

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>

退房上述工作演示！