HTML中的三态复选框？

没有办法在HTML中具有三态检查按钮（是，否，空），对吗？

是否有任何简单的技巧或解决方法，而不必自己渲染整个内容？

编辑 -感谢Janus Troelsen的评论，我找到了一个更好的解决方案：

HTML5为复选框定义了一个属性，称为 indeterminate

请参阅w3c参考指南。要使复选框在视觉上不确定，请将其设置为true：

element.indeterminate = true;

这是Janus Troelsen的小提琴。但是请注意：

• 该indeterminate国不能在HTML标记来设置，它只能通过Javascript完成（见本的jsfiddle测试，这在CSS技巧详细的文章）

• 此状态不会更改复选框的值，它只是掩盖输入真实状态的可视提示。

• 浏览器测试：在Chrome 22，Firefox 15，Opera 12和IE7上为我工作。关于移动浏览器，iOS 3.1上的Android 2.0浏览器和Safari移动不支持它。

先前的答案

另一种方法是使用复选框透明度对于“某些选定的”状态发挥（如Gmail中不使用在以前的版本做）。它将需要一些javascript和CSS类。在这里，我举了一个特殊的示例，该示例处理包含可检查项的列表和一个允许选择所有/不选择项的复选框。当某些列表项被选中时，此复选框显示“已选中”状态。

给定一个带有ID的复选框和一个#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/

希望有帮助！

您可以在元素上使用HTML的indeterminateIDL属性input。

我的建议将使用

• 三个状态的三个适当的unicode字符，例如❓，✅，❌
• 纯文本输入字段（大小= 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时将其用作回调。例如，为其提供一个ID，并在加载事件中将其更改为状态不确定的复选框的javascript版本。

除了上面引用的所有内容外，还有一些jQuery插件可能也有帮助：

对于单个复选框：

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

对于树状行为复选框：

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

编辑 这两个库都使用' indeterminate '复选框属性，因为Html5中的此属性仅用于样式设置（https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state），则永远不会将null值发送到服务器（复选框只能有两个值）。

为了能够将此值提交到服务器，我创建了隐藏的对应字段，这些字段使用一些JavaScript填充到表单提交中。当然，在服务器端，您需要检查那些对应字段而不是原始复选框。

我使用了第一个库（独立的复选框），其中重要的是：

• 初始化选中，未选中，不确定的值
• 使用.val（）函数获取实际值
• 无法执行状态（可能是我的错误）

希望有帮助。

这是其他具有简单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表单元素-这样做不是吗？您的用户将以三种状态之一查看它，即选中，未选中和禁用，它们将显示为灰色且不可单击。对我来说，这似乎类似于“空”或“不适用”，或者您在该第三状态下正在寻找的任何东西。

https://github.com/supernifty/tristate-checkbox有一个简单的JavaScript三态输入字段实现。

带有复选框插件的jQuery插件“ jstree”可以做到这一点。

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

-马特