JQuery - TriState CheckBox

Question

我正在尝试找到一个三态复选框插件。但是，我发现的每个插件都依赖于元素的层次结构（如文件夹结构）。我只有一个复选框元素，我想制作一个三向复选框。

有没有人知道这样做的jquery插件？我真的很惊讶我找不到适用于http://plugins.jquery.com/的那个。

感谢您的投入。

Answer 1

由于jQuery重新设计了他们的插件网站，因此其中一些答案有点过时了。

“Tristate”（不确定）复选框内置于JavaScript中，只需在其上设置属性即可轻松将它们设置为该状态。更多信息： http://css-tricks.com/indeterminate-checkboxes/

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

在新的jQuery插件网站上有一个插件可以提供该功能： http://plugins.jquery.com/tristate-checkbox/

检查，取消选中和不确定三种状态。它提供了不确定的状态，具体取决于是否检查了所有子复选框。

Answer 2

试试这个插件，http://plugins.jquery.com/project/tristate-checkbox

Answer 3

帖子有点旧，但是https://gist.github.com/2886026

我已修改此插件：

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

Answer 4

我遇到了同样的问题 - 我需要它来显示：启用/禁用/忽略

根据jquery ui（http://jqueryui.com/themeroller/）中提供的图标，我创建了以下代码（我知道它不是插件，但在我的情况下这不是必需的）：

我使用的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数组用于您想要旋转的多个状态：

• value：将在输入中输入的值
• class：新跨度将具有的css类
• title：将在创建的范围中设置的可选标题

它基本上创建了一个<span class="data-state-class + classOfState" title="titleOfState">元素，并在点击时通过查看给定的值列表来更新它。

我对它进行了编码，因此它甚至允许通过其他方式进行更改（即直接设置输入值），并在$（“input”）时更新“control”.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上的表单控件库的一部分。

Answer 5

查看我对Tri-state Check box in HTML?的回答：

我的建议是使用

• 三个状态的三个适当的unicode字符，例如❓，✅，❌
• 纯文本输入字段（size = 1）
• 无边框
• 只读
• 显示无光标
• 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'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 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上使用此功能，该功能将于今天晚些时候发布。