22

Primer: HTML チェックボックスを として設定できますindeterminate。これは、チェックされているかチェックされていないかを表示します。この不確定な状態でも、基礎となるブールchecked状態はまだ存在します。

さまざまな状態の Mac OS X チェックボックス

不確定なチェックボックスをクリックすると、そのindeterminate状態が失われます。ブラウザ (Firefox) によっては、さらにcheckedプロパティを切り替えることができます。

この jsfiddleは状況を示しています。Firefox では、チェックボックスのいずれかを 1 回クリックすると、最初の基本的なchecked状態が切り替わります。IE では、checked最初のクリックでプロパティがそのまま残ります。

これが追加の JavaScript を意味する場合でも、すべてのブラウザーが同じように動作することを望みます。残念ながら、ハンドラー(またはjquery ) が呼び出される前にindeterminateプロパティが false に設定されるため、チェックボックスをクリックして呼び出されたかどうかを検出できません。onclickonchangechangeindeterminate

mouseupand (スペースバーのkeyupトグル) イベントは以前のindeterminate状態を示していますが、それほど具体的ではありません。壊れやすいようです。

チェックボックス（または同様のもの）で別のプロパティを維持することはできましたがdata-indeterminate、欠けている簡単な解決策があるかどうか、および/または他の人が同様の問題を抱えているかどうかを知りたいと思いました。

4

4 に答える 4

19

クリックするとすべてのブラウザー(または少なくとも IE、Chrome、および FF5+) でチェックされる中間チェックボックスが必要な場合は、ここに示すように、checked 属性を正しく初期化する必要があります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 の初期化が必要になることに注意してください)。

于 2013-10-18T10:55:43.663 に答える
0

次の理由により、関数を使用して不確定なチェックボックスの値を設定することが適切な解決策になるかどうかはわかりません。

  • それらを使用しているすべての場所を変更する必要があります。
  • ユーザーがチェックボックスをクリックせずにフォームを送信すると、バックエンドが受け取る値はブラウザーによって異なります。

しかし、ブラウザがどのように機能するかを判断する賢い方法が好きです。isCheckedAfterIndeterminate()そのため、代わりに通常のwindow.navigator.userAgent.indexOf('Trident') >= 0IE (または通常とは異なる方法で動作する他のブラウザー) を確認することができます。

したがって、私の解決策は次のようになります。

/// 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');
            }
        });
    });
}
于 2016-11-07T20:03:29.087 に答える