Вопрос по html, checkbox – Как бороться с различиями браузера с неопределенным флажком

21

Primer: HTML-флажок может быть установлен какindeterminate, который отображает его как ни проверено, ни не проверено. Даже в этом неопределенном состоянии все еще есть логическое значениеchecked государство.

Mac OS X checkboxes in various states

Когда установлен неопределенный флажок, он теряет свойindeterminate государство. В зависимости от браузера (Firefox), он может дополнительно переключатьchecked имущество.

Это jsfiddle иллюстрирует ситуацию. В Firefox нажатие на один из флажков один раз заставляет их переключать свои начальныеchecked государство. В IEchecked свойство оставлено в покое для первого клика.

Я хотел бы, чтобы все браузеры вели себя одинаково, даже если это означает дополнительный JavaScript. К сожалению,indeterminate свойство имеет значение falsebefore onclick обработчик (илиonchange и JQuerychange), поэтому я не могу определить, вызван ли он для щелчка поindeterminate флажок или нет.

mouseup а такжеkeyup (для переключения пробела) события показывают предыдущийindeterminate состояние, но я бы не хотел быть таким конкретным: оно кажется хрупким.

Я мог бы сохранить отдельное свойство на флажок (data-indeterminate или аналогичный), но я хотел бы знать, есть ли простое решение, которое мне не хватает, и / или есть ли у других людей аналогичные проблемы.

Я думаю, что данные могут быть способом пойти. James Montagne
Да, я полагаю, что я хотел получить три состояния: мы использовали его, чтобы показать, что некоторые (но не все) дочерние элементы узла были выбраны. Я просто хотел, чтобы все браузеры вели себя одинаково при нажатии на такой узел. aaaidan
Safari для Windows также оставляетchecked один для первого клика Pow-Ian
Спасибо Джеймс. Хм, жесткая толпа. aaaidan
это то, что вы ищете флажок три состояния? Я спрашиваю, потому что неопределенное свойство является только визуальным свойством. Он предназначен для указания пользователю, что значение флажка может потребоваться изменить. Pow-Ian

Ваш Ответ

4   ответа
0

$(".checkbox").click(function(){
    $(this).change();
});
Хотя этот ответ, вероятно, является правильным и полезным, желательно, чтобы вы включили вместе с ним какое-то объяснение, объясняющее, как оно помогает решить проблему. Это становится особенно полезным в будущем, если есть изменение (возможно, не связанное), которое заставляет его перестать работать, и пользователи должны понять, как это когда-то работало.
когда флажок chcek отмечен нажатием, два события происходят одновременно, одно - для щелчка, а другое - для изменения. Теперь в случае "неопределенного" состояние, у вас нет события клика. Так что я использую браузер, если вы нажмете "неопределенный". флажок, он будет переключаться на «проверить» (например, chrome), но для IE это будет "снять отметку". Для Sych этот код может быть полезным$(".checkbox").click(function(e){ e.preventDefault(); $(this).change(); });
17

If you would like to have an inderterminate checkbox which becomes checked on all browsers on click (или хотя бы в 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..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 (обратите внимание, что атрибут «indeterminate» не может быть установлен в разметке HTML, поэтому инициализация JavaScript в любом случае потребовалась бы).

Почему отрицательный голос? Пожалуйста, предоставьте сценарий, где он не работает, чтобы мы могли сделать его лучше
Обратите внимание, чтоchange событие не запускается в IE после того, как флажок покидает неопределенное состояние.jsfiddle.net/paska/K6nrT/20
Это фантастика! Потрясающая работа. Такая простая, надежная идея. aaaidan
Кстати, я думаю, что ваш вопрос был правильно определен как дубликат. Я на самом деле не принял ответ до твоего, но мы все еще сталкивались с той же самой проблемой, которая кажется. :) aaaidan
-1

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

@ConnorGurney, потому что ответ не был принят какbest answer, user613326 получит только половину, если вы вручную не наградите всю награду! Просто и к вашему сведению.
спасибо, хорошо, я рад, что наконец-то смог помочь кому-то здесь.
Рад, что это помогает Коннору, но у меня есть сомнения относительно использования изображения вместо элемента формы, потому что в моем случае важен доступ. Это также означает, что вы не можете использовать флажок операционной системы, который может понравиться некоторым людям. aaaidan
Да, я думаю, что это консенсус, Коннор: если вы хотите использовать «встроенный» элементы формы заставляют его вести себя одинаково во всех браузерах, поддерживая некое неопределенное свойство данных с помощью javascript - единственная опция. Ура! aaaidan
мне просто интересно, aaiden регистрирует проблему, а Коннор назначает награду за этот вопрос?
0

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

you will have to change every place where you are using them, if user submit form without clicking on check-boxes, value that your backend will receive will be different depending of browser.

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

Похожие вопросы