如何处理带有不确定复选框的浏览器差异 [英] How to deal with browser differences with indeterminate checkbox

问题描述

Primer: HTML 复选框可以设置为 indeterminate，即既未选中也未选中.即使在这种不确定的状态下，仍然有一个底层的布尔checked 状态.

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.

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

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

这个 jsfiddle 说明了这种情况.在 Firefox 中，单击任一复选框一次会使它们切换其初始底层 checked 状态.在 IE 中，checked 属性在第一次点击时被保留.

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.

我希望所有浏览器的行为都相同，即使这意味着额外的 javascript.不幸的是，indeterminate 属性在 onclick 处理程序(或 onchange 和 jquery change) 被调用，所以我无法检测它是否被调用以点击 indeterminate 复选框.

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.

mouseup 和 keyup(用于空格键切换)事件显示先前的 indeterminate 状态，但我不想那么具体:看起来很脆弱.

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

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

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.

推荐答案

如果您希望在所有浏览器上单击时都选中一个终止复选框(或至少在 IE、Chrome 和FF5+)，你需要正确初始化checked属性，如下所示http://jsfiddle.net/K6nrT/6/.我编写了以下函数来帮助您:

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

没有图像技巧，没有 jQuery，没有额外的属性，也没有涉及事件处理.这仅依赖于简单的 JavaScript 初始化(请注意，不能在 HTML 标记中设置不确定"属性，因此无论如何都需要 JavaScript 初始化).

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

这篇关于如何处理带有不确定复选框的浏览器差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！