Question

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

Mac OS X checkboxes in various states

单击不确定复选框后，它将失去indeterminate状态。根据浏览器（Firefox），它还可以切换checked属性。

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

我希望所有浏览器的行为都相同，即使这意味着额外的javascript。不幸的是，indeterminate属性在 onclick处理程序（或onchange和jquery change）被调用之前设置为false ，所以我可以'检测是否要求点击indeterminate复选框。

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标记中设置“indeterminate”属性，因此无论如何都需要JavaScript初始化。）

Answer 2

这解决了我的问题

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

Answer 3

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

你必须改变你使用它们的每个地方，
如果用户在没有点击复选框的情况下提交表单，则表示该值您的后端将根据浏览器的不同而收到。

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

所以我的解决方案将是：

/// 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（脚本）使其表现得像那样。我怀疑有多少用户会理解这种状态，所以在你使用它的地方要小心。

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

4 个答案: