Question

我可以使用indeterminate的三态复选框，但我需要旋转4个状态。那么我怎样才能看起来像四元状态复选框？我唯一的选择是创建一组图像，看起来像一个带有各种图标的复选框，还是有更优雅的方式？

Answer 1

你可以用单选按钮和一些CSS（CSS3）实现类似的效果（循环状态），没有Javascript

def uid(df,date1,date2):
    abbs = df.groupby(['Date'])['Unnamed: 2'].apply(list)   
    return list(set(abbs.loc[date1]) - set(abbs.loc[date2]))


uid(df,'2015-01-01','2015-01-02')
Out[162]: [2, 4, 5]

.cyclestate input:not(b),
.cyclestate input:not(b) + label {
  display: none;
}
.cyclestate input:checked + label {
  display: inline-block;
  width: 4em;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-appearance: button;
  -moz-appearance: button;
}

有了这个，您将在一个地方拥有多个状态的空间可视化表示，并在服务器端具有可读值。请注意，标签的这种使用是一种利用：标签的目标输入与其描述的不同。

Answer 2

可以将复选框设置为看起来像它可以有三种状态，但它实际上只有两种状态。
此外，无法从默认用户界面访问“不确定”的可视状态，必须以编程方式触发：

var box = document.getElementById('box'),
    checked = document.getElementById('checked'),
    indet = document.getElementById('indet');
var update = function()
{
    checked.textContent = box.checked;
    indet.textContent = box.indeterminate;
};
box.addEventListener('click', update);
document.getElementById('a').addEventListener('click', function()
{
    box.checked = true;
    update();
});
document.getElementById('b').addEventListener('click', function()
{
    box.checked = false;
    update();
});
document.getElementById('c').addEventListener('click', function()
{
    box.indeterminate = true;
    update();
});
document.getElementById('d').addEventListener('click', function()
{
    box.indeterminate = false;
    update();
});

<input type="checkbox" id="box"><br>
<button id="a">On</button> <button id="b">Off</button><br>
<button id="c">Indeterminate</button> <button id="d">Clear indeterminate</button>
<div>box.checked: <span id="checked"></span></div>
<div>box.indeterminate: <span id="indet"></span></div>

所以回答你的问题：

没有本地方法可以向复选框添加第四个视觉（甚至是实际）状态，但这并不意味着您必须使用图像。
将元素设置为看起来像一个复选框并使用一些JS模拟状态旋转很容易：

var state = 0;
var toggle = document.getElementById('toggle');
toggle.addEventListener('click', function()
{
    state = (state + 1) % 4;
    toggle.className = 'state' + state;
});

#toggle
{
    border: solid 1px #666;
    border-radius: 3px;
    width: 14px;
    height: 14px;
}
.state0
{
    background: linear-gradient(#DDD, #FFF);
}
.state1
{
    background: linear-gradient(#F00, #C00);
}
.state2
{
    background: linear-gradient(#FF0, #CC0);
}
.state3
{
    background: linear-gradient(#0F0, #0A0);
}

<div id="toggle" class="state0"></div>

但最终你将不得不使用除实际复选框之外的东西。

除此之外，拥有一个类似复选框的东西，其中有两个以上的状态实际上是违反直觉的，我恳请你选择一些针对多种状态的东西，比如单选按钮或下拉列表。

Answer 3

今天不可能。对于其他阅读，有关使用三种状态的良好参考，包括不确定：https://css-tricks.com/indeterminate-checkboxes/

您需要使用自己的图标创建不同的解决方案，并在某种意义上创建自定义表单控件。一种可能的设计，满足您对多种状态的需求：

使用图标列表，例如Gmail中的星标系统。当在Gmail中点击星标时，它会改变颜色并最终在经过足够的点击（我认为最多10个）后，其他图标（如感叹号和复选标记）开始显示。

将您的不同状态要求与当前使用的图标（或基础图标列表的索引）相关联。

四态复选框

3 个答案: