html – 如何用不确定的复选框处理浏览器的差异

入门：HTML复选框可以设置为不确定，将其显示为既不选中也不取消选中。即使在这个不确定状态下，仍然有一个基本的布尔检查状态。

当单击不确定的复选框时，它将失去其不确定状态。根据浏览器(Firefox)，它可以另外切换所选属性。

This jsfiddle说明情况。在Firefox中，单击任何一个复选框将导致它们切换其初始底层检查状态。在IE中，已检查的属性被单独保留，用于首次点击。

我希望所有浏览器的行为相同，即使这意味着额外的JavaScript。不幸的是，在调用onclick处理程序(或onchange和jquery更改)之前，将indeterminate属性设置为false，因此我无法检测是否在不确定的复选框上单击它。

mouseup和keyup(用于空格键切换)事件显示先前的不确定状态，但我宁可不那么具体：看起来很脆弱。

我可以在复选框中保留一个单独的属性(数据不确定或类似)，但是我想知道是否有一个简单的解决方案，或者其他人遇到类似的问题。

解决方法

如果您想要在所有浏览器上单击(或至少在IE，Chrome和FF5上)检查所有浏览器，您需要正确初始化已检查的属性，如 http://jsfiddle.net/K6nrT/6/所示。我已经写了以下功能帮你：

/// 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;
}

和依赖于特征检测的有趣的功能：

/// 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;
    }
}

没有图像技巧，没有jQuery，没有额外的属性，没有事件处理涉及。这仅仅依赖于简单的JavaScript初始化(请注意，不能在HTML标记中设置“不确定”属性，因此JavaScript原始化也是必需的)。