JQuery - TriState CheckBox

Ответ 1

Некоторые из этих ответов немного устарели, поскольку jQuery удалил свой сайт плагина.

"Tristate" (неопределенные) флажки встроены прямо в JavaScript, и легко установить их в это состояние, просто установив для них свойство. Больше информации: http://css-tricks.com/indeterminate-checkboxes/

$("#some-checkbox").prop("indeterminate", true);

Там есть плагин, доступный здесь, на новом сайте плагина jQuery, который обеспечивает эту функциональность: http://plugins.jquery.com/tristate-checkbox/

Три состояния проверяются, неконтролируемы и неопределенны. Он предоставил неопределенное состояние в зависимости от того, проверены ли все дочерние флажки или нет.

Ответ 2

Попробуйте этот плагин, http://plugins.jquery.com/project/tristate-checkbox

Ответ 3

Сообщение немного устарело, но здесь https://gist.github.com/2886026

Я изменил этот плагин, чтобы сделать это:

http://webworld-develop.blogspot.com.br/2011/04/small-and-quick-tri-state-checkbox.html

Ответ 4

Я столкнулся с той же проблемой - мне нужно было показать: enable/disable/ignore

На основе значков, доступных в jquery ui (http://jqueryui.com/themeroller/), я создал следующий код (я знаю, что это не плагин, но это wasnt необходимо в моем случае):

HTML, который я использую:

<input type="text" class="rotatestate" value="true"
 data-state-style="cursor:pointer"
 data-state-class="ui-icon"
 data-state-values='[{"value":"true","class":"ui-icon-check","title":"title for true"},{"value":"false","class":"ui-icon-radio-off","title":"title for off"},{"value":"null","class":"ui-icon-cancel","title":"title for third state"}]'/>

Элемент управления принимает json-массив в значениях состояния данных для целого числа состояний, которые вы хотите повернуть:

• значение: значение, которое будет введено на входе
• class: css class (es), который будет иметь новый диапазон
• title: необязательный заголовок, который будет установлен в созданном диапазоне

Он в основном создает элемент <span class="data-state-class + classOfState" title="titleOfState"> и нажимает на него обновления путем кэширования через данный список значений.

Я закодировал его, чтобы он даже разрешил изменение с помощью других средств (т.е. напрямую установил значение ввода) и обновил "управление" при $( "input" ). change(); событие запускается.

Код jquery, который обрабатывает его:

/* rotatestate stontrol */
$("input.rotatestate", location).each(function(){
    var states = $(this).attr("data-state-values");
    var defaultClass = $(this).attr("data-state-class");
    // no need to continue if there are no states
    if(!states) {
        return;
    }

    try {
        states = JSON.parse(states);
    } catch (ex) {
        // do not need to continue if we cannot parse the states
        return;
    }

    var stateControl = $("<span></span>");
    if($(this).attr("data-state-style")) {
        stateControl.attr("style", $(this).attr("data-state-style"));
    }
    stateControl.data("states", states);
    stateControl.data("control", this);
    stateControl.data("activeState", null);
    $(this).data("control", stateControl);
    if(defaultClass) {
        stateControl.addClass(defaultClass);
    }

    // click on the control starts rotating
    stateControl.click(function(){
        var cState = $(this).data().activeState;
        var cStates = $(this).data().states;
        var control = $(this).data().control;
        var newState = null;

        if(cState != null) {
            // go to the 'next' state
            for(var i = 0; i < cStates.length; i++) {
                if(cStates[i].value === cState.value) {
                    // last element
                    if(i === cStates.length - 1) {
                        newState = cStates[0];
                    } else {
                        newState = cStates[i+1];
                    }
                    break;
                }
            }
        } else {
            // no state yet - just set the first
            newState = cStates[0];
        }

        $(control).attr("value", newState.value);
        // trigger change
        $(control).change();
    });

    // make sure to update state if the value is changed
    $(this).change(function(){
        var control = $($(this).data().control);
        var cState = control.data().activeState;
        var cStates = control.data().states;

        if(cState != null) {
            // remove "old state"
            control.removeClass(cState['class']);
        }

        // add new State
        var val = $(this).val();
        $.each(cStates, function(){
            if(this.value === val) {
                control.data().activeState = this;
                if(this.title) {
                    control.attr("title", this.title);
                }
                control.addClass(this['class']);
                return false;
            }
        });
    });

    // trigger initial state
    $(this).change();
    $(this).after(stateControl);
    $(this).hide();
});

Элемент управления также входит в мою библиотеку форм управления https://github.com/corinis/jsForm/wiki/Controls.

Ответ 5

см. мой ответ на Флажок Tri-state в HTML?:

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

• three appropriate unicode characters for the three states e.g. ❓,✅,❌
• поле ввода обычного текста (размер = 1)
• no border
• только для чтения
• нет курсора
• обработчик onclick для переключения через три состояния

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

• http://service.bitplan.com/com/bitplan/tristate/tristate.php
• 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 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>

Ответ 6

Я просматриваю этот двухстрочный слой из https://css-tricks.com/indeterminate-checkboxes/

$('#some_div').on('click','input[type=checkbox]', function(){
   if (this.readOnly) this.checked=this.readOnly=false;
   else if (!this.checked) this.readOnly=this.indeterminate=true;
});

Я использую это на https://github.com/zevero/jquery-checkbox-table, который будет доступен позже этого дня.