四态复选框 [英] Quad-state checkbox

问题描述

我可以有一个三态复选框与不确定，但我需要旋转4个状态。那么我该如何让一个东西看起来像一个四元状态复选框？是我唯一的选择是创建一组图像看起来像一个带有各种图标的复选框，还是有更优雅的方式？

解决方案

复选框可以看起来像，它可以有三个状态，但它只会有两个。

此外，不确定的可视状态是不可达的默认用户界面，必须以程序方式触发：

  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（'c'）。addEventListener（'click'，''）; document.getElementById（' function（）{box.indeterminate = true; update（）;}）; document.getElementById（'d'）。addEventListener / code> 

 < input type =checkboxid =box >< br>< button id =a>开< / button> < button id =b>关闭< / button>< br>< button id =c>不确定< / button& < button id =d>清除不确定的< / button>< div> box.checked：< span id =checked>< / span>< / div>< div&不确定：< span id =indet>< / span>< / div>  


$ b

因此，为了回答你的问题：

没有本地方法可以添加第四个视觉（甚至实际）状态到复选框，但这并不意味着你必须求助于图像。

这是很容易的样式元素看起来像一个复选框，并使用一些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 ，＃CC0）;}。state3 {background：linear-gradient（＃0F0，＃0A0）;}  

 < div id =toggleclass =state0>< / div>  

/ div>

但最后，您必须使用除实际复选框以外的其他选项。

有一个更复杂的两个状态的复选框状的东西是真的反直觉，我请你去与一些为多个状态，如单选按钮或下拉列表。

I can have a tri-state checkbox with indeterminate, but I need to rotate 4 states. So how can I make something to look like a quad state checkbox? Is my only option to create a set of images to look like a checkbox with various icons or is there a more elegant way?

解决方案

A checkbox can be made to look like it can have three states, but it will truly only ever have two.
Also, the "indeterminate" visual state is not reachable from the default user interface and has to be triggered programatically:

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>

So to answer your question:

There is no native way to add a fourth visual (yet even actual) state to a checkbox, but this does not mean that you have to resort to images.
It's easy enough to style an element to look like a checkbox and use some JS to simulate a state rotation:

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>

But in the end you will have to use something other than actual checkboxes.

Apart from that, having a checkbox-like thing with more that two states is really counter-intuitive, and I kindly ask you to go with something that was made for multiple states, like radio buttons or a dropdown list.

这篇关于四态复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！