html - 如何处理带有不确定复选框的浏览器差异

Question

Primer：一个 HTML 复选框可以设置为indeterminate，它显示为既未选中也未选中。即使在这种不确定的状态下，仍然存在一个潜在的布尔checked状态。

---

当一个不确定的复选框被点击时，它会失去它的indeterminate状态。根据浏览器 (Firefox)，它还可以切换checked属性。

这个 jsfiddle说明了这种情况。在 Firefox 中，单击其中一个复选框会导致它们切换其初始基础checked状态。在 IE 中，该checked属性在第一次单击时会单独保留。

我希望所有浏览器的行为都相同，即使这意味着额外的 javascript。不幸的是，在调用处理程序（或和 jquery ）之前，该indeterminate属性设置为 false ，因此我无法检测是否调用它以单击复选框。onclickonchangechangeindeterminate

和mouseup（keyup用于空格键切换）事件显示先前的indeterminate状态，但我不想那么具体：它看起来很脆弱。

我可以在复选框（或类似的）上维护一个单独的属性data-indeterminate，但我想知道我是否缺少一个简单的解决方案，和/或其他人是否有类似的问题。

Answer 1

如果您希望在单击时在所有浏览器（或至少在 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 初始化）。

Answer 2

这解决了我的问题

$(".checkbox").click(function(){
    $(this).change();
});

Answer 3

我不确定使用函数为不确定的复选框设置值是否会是好的解决方案，因为：

• 你将不得不改变你使用它们的每个地方，
• 如果用户在不点击复选框的情况下提交表单，您的后端将收到的值将因浏览器而异。

但我喜欢用聪明的方法来确定浏览器的工作方式。因此，您可以检查一下是否是 IE（或者其他以不寻常方式工作的浏览器）isCheckedAfterIndeterminate()。window.navigator.userAgent.indexOf('Trident') >= 0

所以我的解决方案是：

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

Answer 4

制作您自己的可点击图像并使用一些 java(script) 使其表现得像这样。我怀疑有多少用户会理解这种状态，所以在使用它时要小心。