Search code examples
javascripthtmltri-state-logic

HTML troolean form element

What's the best way to simulate a troolean variable with an HTML form?

Specifically, I've got a column that is to be sorted, so it can have three states: unsorted, ascending, and descending. I want to store the state in a form so it is recovered after page submission.

Is there an elegant way of doing this?

EDIT

Javascript is encouraged here. Right now my solution is a hidden input, with a value of 0,1, or 2. The value is changed when the sort button is clicked, and submitted with the form. But perhaps there's a better way?

EDIT

This question has apparently already been asked: Tri-state Check box in HTML?. Voting to close.

Solution

  • I find the way the top checkbox of gmail is working rather intuitive:

    • if no items are selected, the checkbox is empty
    • if at least an item is selected, the checkbox is selected and has an opacity of 0.5
    • if all items are selected, the checkbox is selected with opacity 1

    You don't need an image like the referenced page about the Tristate checkbox.