Tri-state Check box in HTML?

by

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!

More Related Contents:

  1. POST unchecked HTML checkboxes
  2. What’s the proper value for a checked attribute of an HTML checkbox?
  3. How to style a checkbox using CSS
  4. Two submit buttons in one form
  5. Get $_POST from multiple checkboxes
  6. What is the boundary in multipart/form-data?
  7. Disabled form inputs do not appear in the request
  8. Submitting a form by pressing enter without a submit button
  9. How to read if a checkbox is checked in PHP?
  10. Using PUT method in HTML form
  11. Can HTML checkboxes be set to readonly?
  12. Input Type image submit form value?
  13. Why does the checkbox stay checked when reloading the page?
  14. Multiple radio button groups in one form
  15. How do I send an HTML Form in an Email .. not just MAILTO
  16. HTML Form: Select-Option vs Datalist-Option
  17. Pre-Populate HTML form file input
  18. If an HTML form has two buttons, how do I know which got clicked?
  19. HTML Submit-button: Different value / button-text?
  20. How to clear a form?
  21. What does “for” attribute do in an HTML tag?
  22. Is there a valid way to disable autocomplete in a HTML form?
  23. How do I make a field required in HTML?
  24. Upload a whole directory through an HTML form
  25. Submit HTML form in a new tab
  26. POST vs post, GET vs get
  27. HTML multiple select box
  28. Can I use an HTML input type “date” to collect only a year?
  29. How can I control the height of an Option element in Webkit?
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment