Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
499 views
in Technique[技术] by (71.8m points)

html - How to deal with browser differences with indeterminate checkbox

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


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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

If you would like to have an inderterminate checkbox which becomes checked on all browsers on click (or at least on IE, Chrome and FF5+), you need to initialise the checked attribute correctly, as shown here http://jsfiddle.net/K6nrT/6/. I have written the following functions to help you:

/// Gives a checkbox the inderminate state and the right
/// checked state so that it becomes checked on click
/// on click on IE, Chrome and Firefox 5+
function makeIndeterminate(checkbox)
{
    checkbox.checked = getCheckedStateForIndeterminate();
    checkbox.indeterminate = true;
}

and the interesting function which relies on feature detection:

/// 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 getCheckedStateForIndeterminate()
{
    // 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)
    {
        getCheckedStateForIndeterminate = function () { return false; };
        return false;
    }
    else
    {
        getCheckedStateForIndeterminate = function () { return true; };
        return true;
    }
}

No image tricks, no jQuery, no extra attributes and no event handling involved. This relies only on simple JavaScript initialisation (note that the "indeterminate" attribute cannot be set in the HTML markup, so JavaScript initialisation would have been required anyway).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...