Tri-state Check box in HTML

Question

There is no way to have a tri-state check button  yes  no  null  in HTML  right   Are there any simple tricks or work-arounds without having to render the whole thing by oneself

User · Answer

You can use radio groups to achieve that functionality    lt input type  radio  name  choice  value  yes    gt Yes  lt input type  radio  name  choice  value  No    gt No  lt input type  radio  name  choice  value  null    gt null

User · Answer

As I needed something like this -without any plug-in- for script-generated checkboxes in a table    I ended up with this solution   lt  DOCTYPE html gt   lt html gt   lt body gt   Toto  lt input type  quot checkbox quot  id  quot myCheck1 quot  onclick  quot updateChkBx this  quot    gt  lt br   gt  Tutu  lt input type  quot checkbox quot  id  quot myCheck2 quot  onclick  quot updateChkBx this  quot    gt  lt br   gt  Tata  lt input type  quot checkbox quot  id  quot myCheck3 quot  onclick  quot updateChkBx this  quot    gt  lt br   gt  Tete  lt input type  quot checkbox quot  id  quot myCheck4 quot  onclick  quot updateChkBx this  quot    gt  lt br   gt    lt script gt  var chkBoxState        function updateChkBx src      var idx   Number src id substring 7       7 to bypass the  quot myCheck quot  part in each checkbox id   if typeof chkBoxState idx      quot undefined quot   chkBoxState idx    false     make sure we can use stored state at first call         the problem comes from a click on a checkbox both toggles checked attribute and turns inderminate attribute to false   if chkBoxState idx         src indeterminate   false      src checked   false      chkBoxState idx    false        else if   src checked       passing from checked to unchecked     src indeterminate   true      src checked   true     force considering we are in a checked state     chkBoxState idx    true           to know box state  just test indeterminate  and if not indeterminate  test checked  lt  script gt    lt  body gt   lt  html gt

User · Answer

The jQuery plugin  jstree  with the checkbox plugin can do this   http   www jstree com documentation checkbox  -Matt

User · Answer

You can use an indeterminate state  http   css-tricks com indeterminate-checkboxes   It s supported by the browsers out of the box and don t require any external js libraries

User · Answer

Here other Example with simple jQuery and property data-checked    x000D   x000D       checkbox   x000D     click function e    x000D      var el     this   x000D   x000D      switch  el data  checked      x000D   x000D           unchecked  going indeterminate x000D        case 0  x000D          el data  checked   1   x000D          el prop  indeterminate   true   x000D          break  x000D   x000D             indeterminate  going checked x000D        case 1  x000D          el data  checked   2   x000D          el prop  indeterminate   false   x000D          el prop  checked   true   x000D          break  x000D   x000D             checked  going unchecked x000D        default  x000D          el data  checked   0   x000D          el prop  indeterminate   false   x000D          el prop  checked   false   x000D   x000D        x000D        x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt label gt  lt input type  checkbox  name  checkbox  value    checked id  checkbox  gt  Tri-State Checkbox  lt  label gt  x000D   x000D   x000D

User · Answer

My proposal would be using   three appropriate unicode characters for the three states e g    x2753    x2705    x274C  a plain text input field  size 1  no border read only display no cursor onclick handler to toggle thru the three states   See examples at     http   jsfiddle net wf bitplan com 941std72 8     x000D   x000D      x000D      loops thru the given 3 values for the given control x000D      x000D  function tristate control  value1  value2  value3    x000D    switch  control value charAt 0     x000D      case value1  x000D        control value   value2  x000D      break  x000D      case value2  x000D        control value   value3  x000D      break  x000D      case value3  x000D        control value   value1  x000D      break  x000D      default  x000D           display the current value if it s unexpected x000D        alert control value   x000D      x000D    x000D  function tristate Marks control    x000D    tristate control   u2753     u2705     u274C    x000D    x000D  function tristate Circles control    x000D    tristate control   u25EF     u25CE     u25C9    x000D    x000D  function tristate Ballot control    x000D    tristate control   u2610     u2611     u2612    x000D    x000D  function tristate Check control    x000D    tristate control   u25A1     u2754     u2714    x000D    x000D   lt input type  text   x000D         style  border  none    x000D         onfocus  this blur     x000D         readonly  true   x000D         size  1   x000D         value   amp  x2753   onclick  tristate Marks this     gt  x000D   x000D   lt input style  border  none   x000D         id  tristate   x000D         type  text    x000D         readonly  true   x000D         size  1   x000D         value   amp  x2753     x000D         onclick  switch this form tristate value charAt 0      x000D       case   amp  x2753   this form tristate value   amp  x2705    break    x000D       case   amp  x2705   this form tristate value   amp  x274C    break   x000D       case   amp  x274C   this form tristate value   amp  x2753    break   x000D               gt    x000D   x000D   x000D

User · Answer

Building on the answers above using the indeterminate state  I ve come up with a little bit that handles individual checkboxes and makes them tri-state  MVC razor uses 2 inputs per checkbox anyway  the checkbox and a hidden with the same name to always force a value in the submit    MVC uses things like  quot true quot  as the checkbox value and  quot false quot  as the hidden of the same name  makes it amenable to boolean use in api calls   This snippet uses an third hidden to persist the last request values across submits  Checkboxes initialized with the below will start indeterminate   Checking once turns on the checkbox   Checking twice turns off the checkbox  returning the hidden value of the same name    Checking a third time returns it to indeterminate  and clears out the hidden so a submit will produce a blank   The page also populates another hidden  e g  triBox2Orig  with whatever value was on the query string to start  so the 3 states can be initialized and persisted between submits    document  ready function          var initCheckbox   function  chkBox                var hidden       name  quot       chkBox  prop  quot name quot       quot   type  quot hidden quot              var hiddenOrig       name  quot       chkBox  prop  quot name quot      Orig quot   type  quot hidden quot     prop  quot value quot            hidden prop  quot origValue quot   hidden prop  quot value quot             if   chkBox prop  quot checked quot    amp  amp   hiddenOrig  chkBox prop  quot indeterminate quot   true           if  chkBox prop  quot indeterminate quot    hidden prop  quot value quot   null           chkBox change checkBoxToggleFun              var checkBoxToggleFun   function                  var isChecked     this  prop  checked            var hidden       name  quot       this  prop  quot name quot       quot   type  quot hidden quot              var thirdState   isChecked  amp  amp  hidden prop  quot value quot       hidden prop  quot origValue quot            if  thirdState         on 3rd click of a checkbox  set it back to indeterminate               this  prop  quot indeterminate quot   true                 this  prop  checked   false                     hidden prop  quot value quot   thirdState   null   hidden prop  quot origValue quot                 var chkBox       triBox1        initCheckbox chkBox        chkBox       triBox2        initCheckbox chkBox

User · Answer

Edit     Thanks to Janus Troelsen s comment  I found a better solution   HTML5 defines a property for checkboxes called indeterminate  See w3c reference guide  To make checkbox appear visually indeterminate set it to true   element indeterminate   true    Here is Janus Troelsen s fiddle  Note  however  that    The indeterminate state cannot be set in the HTML markup  it can only be done via Javascript  see this JSfiddle test and this detailed article in CSS tricks  This state doesn t change the value of the checkbox  it is only a visual cue that masks the input s real state  Browser test  Worked for me in Chrome 22  Firefox 15  Opera 12 and back to IE7  Regarding mobile browsers  Android 2 0 browser and Safari mobile on iOS 3 1 don t have support for it    Previous answer     Another alternative would be to play with the checkbox transparency   for the  some selected  state  as Gmail does used to   do in previous versions   It will require some javascript and a CSS   class  Here I put a particular example that handles a list with   checkable items and a checkbox that allows to select all none of them    This checkbox shows a  some selected  state when some of the list   items are selected       Given a checkbox with an ID  select all and several checkboxes with   a class  select one       The CSS class that fades the  select all  checkbox would be the   following    some selected       opacity  0 5      filter  alpha opacity 50           And the JS code that handles the tri-state of the select all checkbox   is the following       select all   change  function            Check uncheck all the list s checkboxes         select one   attr  checked     this  is   checked           Remove the faded state       this  removeClass  some selected             select one   change  function        if      select one checked   length    0            select all   removeClass  some selected   attr  checked   false     else if      select one not  checked    length    0            select all   removeClass  some selected   attr  checked   true     else           select all   addClass  some selected   attr  checked   true             You can try it here  http   jsfiddle net 98BMK       Hope that helps

User · Answer

There s a simple JavaScript tri-state input field implementation at https   github com supernifty tristate-checkbox

User · Answer

It s possible to have HTML form elements disabled -- wouldn t that do  Your users would see it in one of three states  i e  checked  unchecked  and disabled  which would be greyed out and not clickable  To me  that seems similar to  null  or  not applicable  or whatever you re looking for in that third state

User · Answer

Besides all cited above  there are jQuery plugins that may help too   for individual checkboxes    jQuery-Tristate-Checkbox-plugin  http   vanderlee github io tristate    for tree-like behavior checkboxes    jQuery Tristate  http   jlbruno github io jQuery-Tristate-Checkbox-plugin    EDIT Both libraries uses the  indeterminate  checkbox attribute  since this attribute in Html5 is just for styling  https   www w3 org TR 2011 WD-html5-20110113 number-state html checkbox-state   the null value is never sent to the server  checkboxes can only have two values     To be able to submit this value to the server  I ve create hidden counterpart fields which are populated on form submission using some javascript  On the server side  you d need to check those counterpart fields instead of original checkboxes  of course   I ve used the first library  standalone checkboxes  where it s important to    Initialize the checked  unchecked  indeterminate values use  val   function to get the actual value Cannot make work  state  probably my mistake    Hope that helps

User · Answer

I think that the most semantic way is using readonly attribute that checkbox inputs can have  No css  no images  etc  a built-in HTML property   See Fiddle  http   jsfiddle net chriscoyier mGg85 2   As described here in last trick  http   css-tricks com indeterminate-checkboxes

User · Answer

Refering to  BoltClock answer  here is my solution for a more complex recursive method   http   jsfiddle net gx7so2tq 2   It might not be the most pretty solution but it works fine for me and is quite flexible   I use two data objects defining the container   data-select-all  chapter1    and the elements itself   data-select-some  chapter1    Both having the same value  The combination of both data-objects within one checkbox allows sublevels  which are scanned recursively  Therefore two  helper  functions are needed to prevent the change-trigger

User · Answer

You ll need to use javascript css to fake it   Try here for an example  http   www dynamicdrive com forums archive index php t-26322 html

User · Answer

Like  Franz answer you can also do it with a select  For example    lt select gt     lt option gt  lt  option gt     lt option value  Yes  gt Yes lt  option gt     lt option value  No  gt No lt  option gt   lt  select gt    With this you can also give a concrete value that will be send with the form  I think that with javascript indeterminate version of checkbox  it will send the underline value of the checkbox   At least  you can use it as a callback when javascript is disabled  For example  give it an id and in the load event change it to the javascript version of the checkbox with indeterminate status

User · Answer

You could use HTML s indeterminate IDL attribute on input elements

User · Answer

Here is a runnable example using the mentioned indeterminate attribute    x000D   x000D  const indeterminates   document getElementsByClassName  indeterminate    x000D  indeterminates  0   indeterminate    true  x000D   lt form gt  x000D     lt div gt  x000D       lt input type  checkbox  checked  checked    gt True x000D     lt  div gt  x000D     lt div gt  x000D       lt input type  checkbox    gt False x000D     lt  div gt  x000D     lt div gt  x000D       lt input type  checkbox  class  indeterminate    gt Indeterminate x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Just run the code snippet to see how it looks like

[html] Tri-state Check box in HTML?

Examples related to html

Examples related to forms

Examples related to checkbox