Question: **Primer:** An HTML checkbox can be set as `indeterminate`, which displays it as neither checked nor unchecked. Even in this indeterminate state, there is still an underlying boolean `checked` state.

![Mac OS X checkboxes in various states](https://i.stack.imgur.com/UlpJ8.png)

---

When an indeterminate checkbox is clicked, it loses its `indeterminate` state. Depending on the browser (Firefox), it can additionally toggle the `checked` property.

[This jsfiddle](http://jsfiddle.net/MLMep/9/) illustrates the situation. In Firefox, clicking either of the checkboxes once causes them to toggle their initial underlying `checked` state. In IE, the `checked` property is left alone for the first click.

I would like all browsers to behave the same, even if this means additional javascript. Unfortunately, the `indeterminate` property is set to false *before* the `onclick` handler (or `onchange` and jquery `change`) is called, so I can't detect whether it's called for a click on an `indeterminate` checkbox or not.

The `mouseup` and `keyup` (for spacebar toggle) events show the prior `indeterminate` state, but I'd rather not be that specific: it seems fragile.

I could maintain a separate property on the checkbox (`data-indeterminate` or similar), but I wanted to know if there's a simple solution I'm missing, and/or if other people are having similar issues.

Answer: 
I am not sure that will using function to set value for indeterminate checkboxes will be good solutions because:

* you will have to change every place where you are using them,
* if user submit form without clicking on check-boxes, value that
your backend will receive will be different depending of browser.

But I like clever way to determinate how browser works.
So you could check `isCheckedAfterIndeterminate()` instead usual `window.navigator.userAgent.indexOf('Trident') >= 0` to see is it IE (or maybe other browser that works in unusual way).

So my solution will be:

```
/// Determine the checked state to give to a checkbox
/// with indeterminate state, so that it becomes checked
/// on click on IE, Chrome and Firefox 5+
function isCheckedAfterIndeterminate()
{
    // Create a unchecked checkbox with indeterminate state
    var test = document.createElement("input");
    test.type = "checkbox";
    test.checked = false;
    test.indeterminate = true;

    // Try to click the checkbox
    var body = document.body;
    body.appendChild(test); // Required to work on FF
    test.click();
    body.removeChild(test); // Required to work on FF

    // Check if the checkbox is now checked and cache the result
    if (test.checked) {
        isCheckedAfterIndeterminate = function () { return false; };
        return false;
    } else {
        isCheckedAfterIndeterminate = function () { return true; };
        return true;
    }
}

// Fix indeterminate checkbox behavoiur for some browsers.
if ( isCheckedAfterIndeterminate() ) {
    $(function(){
        $(document).on('mousedown', 'input', function(){
            // Only fire the change event if the input is indeterminate.
            if ( this.indeterminate ) {
                this.indeterminate = false;
                $(this).trigger('change');
            }
        });
    });
}

```
Well make your own clickable image and use some java(script) to make it behave like that.
I doubt dough how many users would understand this state, so be carefull where you use it.