Как бороться с различиями в браузерах с неопределенным флажком

Если вы хотите установить неопределяемый флажок, который будет установлен во всех браузерах при нажатии (или, по крайней мере, в 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 все равно потребовалась бы).

Это решило мою проблему

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

Я не уверен, что использование функции для установки значения для неопределенных флажков будет хорошим решением, потому что:

• вам придется менять каждое место, где вы их используете,
• если пользователь отправляет форму, не нажимая флажки, значение, которое получит ваш сервер, будет отличаться в зависимости от браузера.

Но мне нравится умный способ определить, как работает браузер. Таким образом, вы можете проверить 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');
            }
        });
    });
}

Что ж, создайте свое собственное кликабельное изображение и используйте какой-нибудь java (скрипт), чтобы оно вело себя так. Я сомневаюсь, что многие пользователи поймут это состояние, поэтому будьте осторожны, где вы его используете.