四態複選框

Question

我可以有一個三態複選框indeterminate，但我需要旋轉4個狀態。那麼我怎麼能讓一些東西看起來像一個四狀態複選框？我唯一的選擇是創建一組圖像，看起來像是帶有各種圖標的複選框，還是有更優雅的方式？

Answer 1

複選框可以製作成看起來像它可以有三種狀態，但它只會有兩種狀態。
此外，「不確定」的視覺狀態不是從默認的用戶界面訪問，並已被編程觸發：

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 2

今天不可能。對於其他人閱讀，關於使用三種狀態（包括不確定性）的很好參考：https://css-tricks.com/indeterminate-checkboxes/

您需要使用自己的圖標創建不同的解決方案，並在某種意義上創建自定義窗體控件。可能的設計滿足您的多種狀態需求：

使用圖標列表，例如Gmail中的明星系統。當在Gmail中點擊該星標時，它會改變顏色，最終在點擊足夠多後（最多10個我認爲），其他圖標像感嘆號和複選標記開始顯示。

將您的不同狀態要求與當前使用的圖標（或底層圖標列表的索引）相關聯。

Answer 3

可以達到類似的效果（循環狀態的東西）與單選按鈕和一個位CSS（CSS3）的，沒有JavaScript

.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; 
 
}

<span class="cyclestate"> 
 
    <input type="radio" name="foo" value="one" id="one" checked> 
 
    <label for="two">one</label> 
 
    <input type="radio" name="foo" value="two" id="two"> 
 
    <label for="three">two</label> 
 
    <input type="radio" name="foo" value="three" id="three"> 
 
    <label for="four">three</label> 
 
    <input type="radio" name="foo" value="four" id="four"> 
 
    <label for="one">four</label> 
 
</span>

有了這個you'll具有空間節省視覺表現多個狀態在一個地方和服務器端的可讀值。需要警告的是，標籤的這種使用是一種有用的方式：標籤的目標是不同於其描述的輸入。