HTML中的三态复选框？ [英] Tri-state Check box in HTML?

问题描述

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

有什么简单的技巧或工作 -

解决方案

编辑
$ b

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

HTML5为 indeterminate b

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

  element.indeterminate = true; 
  

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

• 不能设置 indeterminate 在HTML标记中，只能通过Javascript完成（请参阅此 JSfiddle测试和此 CSS技巧中的详细信息）




• 此状态不会更改复选框的值




• 浏览器测试：适用于Chrome 22，Firefox 15，Opera 12以及回到IE7。关于移动浏览器，iOS 2.0上的Android 2.0浏览器和Safari移动版不支持此功能。

上一个答案

另一种选择是使用某些已选择状态的复选框透明度在以前的版本中使用）。它需要一些javascript和CSS类。这里我把一个特定的例子处理一个列表包含可检查的项目和一个复选框，允许选择所有/没有。

如果选中了一个ID为 #select_all 和几个复选框与类 .select_one ，

CSS类，淡化全选复选框如下：

  .some_selected {
 opacity：0.5; 
 filter：alpha（opacity = 50）; 
} 
  

处理全选复选框三态的JS代码如下：

  $（'＃select_all'）change（function（）
 {
 / /检查/取消选中所有列表的复选框
 $（'。select_one'）attr（'checked'，$（this）.is（'：checked'））; 
 //删除褪色状态
 $（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）'）。 ）
 $（'＃select_all'）。removeClass（'some_selected'）。attr（'checked'，true）; 
 else 
 $（'＃select_all'）。addClass '）.attr（'checked'，true）; 
}）; 
  

您可以在这里试用： http://jsfiddle.net/98BMK/

希望有所帮助！

There is no way to have a tri-state check button (yes, no, null) in HTML, right?

Are there any simple tricks or work-arounds without having to render the whole thing by oneself?

解决方案

Edit

Thanks to Janus Troelsen's comment, I found a better solution.

HTML5 defines a property for checkboxes called indeterminate

See w3c reference guide. To make checkbox appear visually indeterminate set it to true:

element.indeterminate = true;

Here is Janus Troelsen's fiddle. Note, however, that:

• The indeterminate state cannot be set in the HTML markup, it can only be done via Javascript (see this JSfiddle test and this detailed article in CSS tricks)

• This state doesn't change the value of the checkbox, it is only a visual cue that masks the input's real state.

• Browser test: Worked for me in Chrome 22, Firefox 15, Opera 12 and back to IE7. Regarding mobile browsers, Android 2.0 browser and Safari mobile on iOS 3.1 don't have support for it.

Previous answer

Another alternative would be to play with the checkbox transparency for the "some selected" state (as Gmail does used to do in previous versions). It will require some javascript and a CSS class. Here I put a particular example that handles a list with checkable items and a checkbox that allows to select all/none of them. This checkbox shows a "some selected" state when some of the list items are selected.

Given a checkbox with an ID #select_all and several checkboxes with a class .select_one,

The CSS class that fades the "select all" checkbox would be the following:

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

And the JS code that handles the tri-state of the select all checkbox is the following:

$('#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);
});

You can try it here: http://jsfiddle.net/98BMK/

Hope that helps!

这篇关于HTML中的三态复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！