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

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

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

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

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_one,

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

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

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

$('#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/

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

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

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

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

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

• http://jsfiddle.net/wf_bitplan_com/941std72/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');
}

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

<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; 
       };" />  

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

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

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

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

Смотрите Фиддл:
http://jsfiddle.net/chriscoyier/mGg85/2/

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

Вот исполняемый пример с использованием упомянутого indeterminateатрибута :

const indeterminates = document.getElementsByClassName('indeterminate');
indeterminates['0'].indeterminate  = true;

<form>
  <div>
    <input type="checkbox" checked="checked" />True
  </div>
  <div>
    <input type="checkbox" />False
  </div>
  <div>
    <input type="checkbox" class="indeterminate" />Indeterminate
  </div>
</form>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот другой пример с простым jQuery и свойством data-checked:

 $("#checkbox")
  .click(function(e) {
    var el = $(this);

    switch (el.data('checked')) {

      // unchecked, going indeterminate
      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', true);
        break;

        // indeterminate, going checked
      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        break;

        // checked, going unchecked
      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);

    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="checkbox" value="" checked id="checkbox"> Tri-State Checkbox </label>

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

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

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

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

data-select-all="chapter1"

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

data-select-some="chapter1"

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

Вы должны будете использовать javascript / css, чтобы подделать его.

Попробуйте здесь для примера: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

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

Есть простая реализация поля ввода с тремя состояниями JavaScript на https://github.com/supernifty/tristate-checkbox

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

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

Матф