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

问题描述

引用：一个HTML复选框可以设置为 indeterminate ，它显示为未选中或未选中。即使在这种不确定的状态下，仍然有一个底层的布尔检查 c>状态。

---

当单击一个不确定的复选框时，它会失去其 indeterminate 状态。根据浏览器（Firefox），它还可以切换已选中属性。

这个jsfiddle 说明了情况。在Firefox中，单击一个复选框一次会使它们切换其初始的检查状态。在IE中，检查属性留给第一次单击。

我想所有浏览器的行为相同，即使这意味着额外的javascript。不幸的是， onclick 处理程序（或<$）之前， indeterminate 属性设置为false c $ c> onchange 和jquery change ）被调用，因此我无法检测是否点击<$ c $

mouseup 和 keyup （用于空格键切换）事件显示之前的不确定状态，但我不想那么具体： p>

我可以在复选框上保留一个单独的属性（ data-indeterminate 或类似），但我想知道一个简单的解决方案，我错过了，和/或如果其他人有类似的问题。

解决方案

喜欢有一个inderterminate复选框，在所有浏览器上点击（或至少在IE，Chrome和FF5 +），您需要正确初始化checked属性，如这里所示http://jsfiddle.net/K6nrT/6/ 。我已经写了以下函数来帮助你：

  ///给出一个复选框去中断状态和右边
 ///检查状态，以便它点击
 ///时检查点击IE，Chrome和Firefox 5+ 
 function makeIndeterminate（checkbox）
 {
 checkbox.checked = getCheckedStateForIndeterminate（）; 
 checkbox.indeterminate = true; 
} 
  

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

  ///确定给予复选框的检查状态
 ///具有不确定状态，因此变为检查
 ///点击IE，Chrome和Firefox 5+ 
 function getCheckedStateForIndeterminate（）
 {
 //创建一个未定的状态的复选框
 var test = document.createElement input）; 
 test.type =checkbox; 
 test.checked = false; 
 test.indeterminate = true; 
 
 //尝试单击复选框
 var body = document.body; 
 body.appendChild（test）; //需要在FF 
上工作test.click（）; 
 body.removeChild（test）; //需要在FF $ b上工作
 $ b //检查复选框现在是否被选中并缓存结果
 if（test.checked）
 {
 getCheckedStateForIndeterminate = function （）{return false; }; 
 return false; 
} 
 else 
 {
 getCheckedStateForIndeterminate = function（）{return true; }; 
 return true; 
} 
} 
  

没有图像技巧，没有jQuery，没有额外的属性没有涉及事件处理。这只依赖于简单的JavaScript初始化（注意，indeterminate属性不能在HTML标记中设置，所以无论如何都需要JavaScript初始化）。

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.

---

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.

解决方案

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

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