我正在开发一个网站,我一直在寻找一个允许我使用三个状态复选框的插件。
不幸的是,我发现的所有东西(例如:http://extremefe.github.io/bootstrap-checkbox/)都将其“不确定”状态视为一个完整的正方形或破折号。我需要它是一个问号?
有人有解决方法吗?
答案 0 :(得分:4)
您不能将?
作为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) {
希望这有帮助!
<强>小提琴:强>
/**
* 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>
查看上面的工作演示!