Три состояния флажок в HTML?

Question

Нет способа иметь кнопку проверки трех состояний (да, нет, ноль) в HTML, верно?

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

Answer 1

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

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

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

element.indeterminate = true;

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

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

• Это состояние не меняет значение флажка, а только визуальный сигнал, маскирующий реальное состояние ввода.

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

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

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

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

CSS-класс, который исчезает с флажка «выбрать все», будет следующее:

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

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

$('#select_all').change (function ()
{
    //Check/uncheck all the list's 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/

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

Answer 2

Вы можете использовать атрибут HTML indeterminate IDL для input элементов.

Answer 3

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

• три соответствующих символа Юникода для трех состояний, например & # X2753;, & # x2705;, & # x274C;
• поле ввода простого текста (размер = 1)
• без границ
• только для чтения
• не отображать курсор
• обработчик onclick для переключения между тремя состояниями

См. Примеры по адресу:

• http://jsfiddle.net/wf_bitplan_com/941std72/8/

Источник 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's 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>

Answer 4

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

Answer 5

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

См. Fiddle:
http://jsfiddle.net/chriscoyier/mGg85/2/

Как описано здесь в последнем приеме: http://css -tricks.com / неопределенный-флажки /

Answer 6

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

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

Answer 7

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

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

• jQuery-Tristate-Checkbox-plugin: http://vanderlee.github.io/tristate/

для флажков древовидного поведения:

• JQuery Tristate: http://jlbruno.github.io/jQuery-Tristate-Checkbox-plugin/

EDIT В обеих библиотеках используется атрибут « indeterminate », поскольку этот атрибут в Html5 предназначен только для стиля (https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state), нулевое значение никогда не отправляется на сервер (флажки могут иметь только два значения).

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

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

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

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

Answer 8

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

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

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

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

Answer 9

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

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

Возможно, это не самое симпатичное решение, но оно прекрасно работает для меня и довольно гибкое.

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

data-select-all="chapter1"

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

data-select-some="chapter1"

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

Answer 10

Плагин jQuery "jstree" с плагином checkbox может сделать это.

http://www.jstree.com/documentation/checkbox

Матф