Флажок Tri-state в HTML?

Нет способа установить в HTML правильную кнопку проверки tri-state (да, нет, null)?

Есть ли какие-либо простые трюки или обходные пути без необходимости делать все это самим?

ОТВЕТЫ

Ответ 1

Редактировать - благодаря комментарию Януса Троелсена я нашел лучшее решение:

HTML5 определяет свойство для флажков, называемое indeterminate

См. Справочное руководство w3c. Чтобы сделать флажок визуально неопределенным, установите для него значение true:

element.indeterminate = true;

Вот скрипка Януса Троелсена. Обратите внимание, однако, что:

  • indeterminate состояние не может быть установлено в разметке HTML, это может быть сделано только через Javascript (см. Этот тест JSfiddle и эту подробную статью по трюкам CSS)

  • Это состояние не меняет значение флажка, это только визуальная подсказка, которая маскирует реальное состояние ввода.

  • Тест браузера: у меня работал в Chrome 22, Firefox 15, Opera 12 и обратно в IE7. Что касается мобильных браузеров, браузер Android 2.0 и Safari mobile на iOS 3.1 не поддерживают его.

Предыдущий ответ

Другой альтернативой было бы поиграть с прозрачностью флажка для состояния "некоторые выбраны" (как это делал Gmail в предыдущих версиях). Это потребует некоторого JavaScript и CSS-класса. Здесь я поместил конкретный пример, который обрабатывает список с проверяемыми элементами и флажок, который позволяет выбрать все/ни один из них. Этот флажок показывает состояние "некоторые выбраны", когда некоторые элементы списка выбраны.

Имея флажок с идентификатором #select_all и несколько #select_all с классом .select_one,

Класс CSS, который скрывает флажок "выбрать все", будет следующим:

.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

И код JS, который обрабатывает три состояния флажка select all, выглядит следующим образом:

$('#select_all').change (function ()
{
    //Check/uncheck all the list checkboxes
    $('.select_one').attr('checked', $(this).is(':checked'));
    //Remove the faded state
    $(this).removeClass('some_selected');
});

$('.select_one').change (function ()
{
  if ($('.select_one:checked').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', false);
  else if ($('.select_one:not(:checked)').length == 0)
      $('#select_all').removeClass('some_selected').attr('checked', true);
  else
      $('#select_all').addClass('some_selected').attr('checked', true);
});

Вы можете попробовать это здесь: http://jsfiddle.net/98BMK/

Надеюсь, это поможет!

Ответ 3

Мое предложение будет использовать

  • три соответствующих символа Юникода для трех состояний, например, ❓, ✅, ❌
  • поле ввода простого текста (размер = 1)
  • без границ
  • только для чтения
  • не отображать курсор
  • обработчик onclick для переключения между тремя состояниями

Смотрите примеры на:

HTML источник:

<input type='text' 
       style='border: none;' 
       onfocus='this.blur()' 
       readonly='true' 
       size='1' 
       value='&#x2753;' onclick='tristate_Marks(this)' />

или как встроенный JavaScript:

<input style="border: none;"
       id="tristate" 
       type="text"  
       readonly="true" 
       size="1" 
       value="&#x2753;"  
       onclick="switch(this.form.tristate.value.charAt(0)) { 
         case '&#x2753': this.form.tristate.value='&#x2705;'; break;  
         case '&#x2705': this.form.tristate.value='&#x274C;'; break; 
         case '&#x274C': this.form.tristate.value='&#x2753;'; break; 
       };" />

Исходный код Javascript:

<script type="text/javascript" charset="utf-8">
  /**
   *  loops thru the given 3 values for the given control
   */
  function tristate(control, value1, value2, value3) {
    switch (control.value.charAt(0)) {
      case value1:
        control.value = value2;
      break;
      case value2:
        control.value = value3;
      break;
      case value3:
        control.value = value1;
      break;
      default:
        // display the current value if it unexpected
        alert(control.value);
    }
  }
  function tristate_Marks(control) {
    tristate(control,'\u2753', '\u2705', '\u274C');
  }
  function tristate_Circles(control) {
    tristate(control,'\u25EF', '\u25CE', '\u25C9');
  }
  function tristate_Ballot(control) {
    tristate(control,'\u2610', '\u2611', '\u2612');
  }
  function tristate_Check(control) {
    tristate(control,'\u25A1', '\u2754', '\u2714');
  }

</script>

Ответ 4

Вы можете использовать неопределенное состояние: http://css-tricks.com/indeterminate-checkboxes/. Он поддерживается браузерами из коробки и не требует каких-либо внешних js-библиотек.

Ответ 5

Для достижения этой функциональности вы можете использовать группы радиостанций:

<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null

Ответ 6

Я думаю, что самый семантический способ использует атрибут readonly, который может иметь входные флажки. Нет css, нет изображений и т.д.; встроенное свойство HTML!

См. скрипт:
http://jsfiddle.net/chriscoyier/mGg85/2/

Как описано здесь в последнем трюке: http://css-tricks.com/indeterminate-checkboxes/

Ответ 7

Как и ответ @Franz, вы также можете сделать это с помощью select. Например:

<select>
  <option></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

С этим вы также можете указать конкретное значение, которое будет отправлено с помощью формы, я думаю, что с неопределенной версией флажка javascript он отправит значение подчеркивания этого флажка.

По крайней мере, вы можете использовать его как обратный вызов, когда javascript отключен. Например, дайте ему идентификатор и в событии загрузки измените его на javascript версию флажка с неопределенным статусом.

Ответ 8

Кроме всего процитированного выше, есть и плагины jQuery, которые могут помочь:

для отдельных флажков:

для древовидного поведения:

ИЗМЕНИТЬ Обе библиотеки используют атрибут check неопределенный ', поскольку этот атрибут в Html5 предназначен только для стилей (https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state), нулевое значение никогда не отправляется на сервер (флажки могут иметь только два значения).

Чтобы отправить это значение на сервер, я создаю скрытые поля-партнеры, которые заполняются при отправке формы с использованием некоторого javascript. Разумеется, на стороне сервера вам нужно будет проверить эти поля партнера, а не оригинальные флажки.

Я использовал первую библиотеку (отдельные флажки), где важно:

  • Инициализировать проверенные, непроверенные, неопределенные значения
  • используйте функцию .val() для получения фактического значения
  • Невозможно выполнить работу .state(возможно, моя ошибка)

Надеюсь, что это поможет.

Ответ 9

Ссылаясь на @BoltClock answer, вот мое решение для более сложного рекурсивного метода:

http://jsfiddle.net/gx7so2tq/2/

Это может быть не самое красивое решение, но оно отлично работает для меня и довольно гибкое.

Я использую два объекта данных, определяющих контейнер:

data-select-all="chapter1"

и сами элементы:

data-select-some="chapter1"

Оба имеют одинаковое значение. Комбинация обоих объектов данных в пределах одного флажка позволяет подуровням, которые сканируются рекурсивно. Поэтому для предотвращения триггера изменения необходимы две "вспомогательные" функции.

Ответ 11

Возможно, что элементы HTML-формы отключены - не так ли? Ваши пользователи будут видеть это в одном из трех состояний, то есть отмечены, не отмечены и отключены, которые будут недоступны и не будут доступны для просмотра. Для меня это похоже на "null" или "неприменимо" или что-то, что вы ищете в этом третьем состоянии.