Html HTML中的三态复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1726096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tri-state Check box in HTML?
提问by Pekka
There is no way to have a tri-state check button (yes, no, null) in HTML, right?
没有办法在 HTML 中使用三态检查按钮（是，否，空），对吗？
Are there any simple tricks or work-arounds without having to render the whole thing by oneself?
是否有任何简单的技巧或变通方法而不必自己渲染整个事物？
回答by pau.moreno
Edit— Thanks to Janus Troelsen's comment, I found a better solution:
编辑- 感谢 Janus Troelsen 的评论，我找到了一个更好的解决方案：
HTML5 defines a property for checkboxes called indeterminate
HTML5 为复选框定义了一个属性，称为 indeterminate
See w3c reference guide. To make checkbox appear visually indeterminate set it to true:
请参阅w3c 参考指南。要使复选框在视觉上不确定，请将其设置为 true：
element.indeterminate = true;
Here is Janus Troelsen's fiddle. Note, however, that:
这是Janus Troelsen 的小提琴。但是，请注意：
The
indeterminatestate cannot be set in the HTML markup, it can only be done via Javascript (see this JSfiddle testand 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.
该
indeterminate国不能在HTML标记来设置，它只能通过Javascript完成（见本的jsfiddle测试，这在CSS技巧详细的文章）此状态不会更改复选框的值，它只是掩盖输入真实状态的视觉提示。
浏览器测试：在 Chrome 22、Firefox 15、Opera 12 和 IE7 中为我工作。关于移动浏览器，Android 2.0 浏览器和 iOS 3.1 上的 Safari mobile 不支持它。
Previous answer
上一个答案
Another alternative would be to play with the checkbox transparency for the "some selected" state (as Gmail
doesused 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_alland 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!
另一种方法是使用复选框透明度对于“某些选定的”状态发挥（如Gmail中
不使用在以前的版本做）。它需要一些 javascript 和一个 CSS 类。在这里，我放了一个特殊的例子，它处理一个包含可检查项目的列表和一个允许选择全部/不选择它们的复选框。当某些列表项被选中时，此复选框显示“某些选中”状态。给定一个带有 ID 的复选框
#select_all和几个带有 class 的复选框.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/
希望有帮助！
回答by Ms2ger
You could use HTML's indeterminateIDL attributeon inputelements.
您可以在元素上使用 HTML 的indeterminateIDL 属性input。
回答by Wolfgang Fahl
My proposal would be using
我的建议将使用
- three appropriate unicode characters for the three states e.g. ❓,✅,❌
- a plain text input field (size=1)
- no border
- read only
- display no cursor
- onclick handler to toggle thru the three states
- 三种状态的三个合适的 unicode 字符，例如 ❓,✅,❌
- 纯文本输入字段（大小=1）
- 无边界
- 只读
- 不显示光标
- onclick 处理程序在三个状态之间切换
See examples at:
参见示例：
/**
* 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='❓' onclick='tristate_Marks(this)' />
<input style="border: none;"
id="tristate"
type="text"
readonly="true"
size="1"
value="❓"
onclick="switch(this.form.tristate.value.charAt(0)) {
case '❓': this.form.tristate.value='✅'; break;
case '✅': this.form.tristate.value='❌'; break;
case '❌': this.form.tristate.value='❓'; break;
};" /> 回答by altso
You can use an indeterminate state: http://css-tricks.com/indeterminate-checkboxes/. It's supported by the browsers out of the box and don't require any external js libraries.
您可以使用不确定状态：http: //css-tricks.com/indeterminate-checkboxes/。它由开箱即用的浏览器支持，不需要任何外部 js 库。
回答by Webinan
I think that the most semanticway is using readonlyattribute that checkbox inputs can have. No css, no images, etc; a built-in HTML property!
我认为最语义化的方式是使用readonly复选框输入可以具有的属性。没有CSS，没有图像等；一个内置的 HTML 属性！
See Fiddle:
http://jsfiddle.net/chriscoyier/mGg85/2/
见小提琴：http :
//jsfiddle.net/chriscoyier/mGg85/2/
As described here in last trick: http://css-tricks.com/indeterminate-checkboxes/
如上一个技巧中所述：http: //css-tricks.com/indeterminate-checkboxes/
回答by gil.fernandes
Here is a runnable example using the mentioned indeterminateattribute:
这是一个使用上述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>Just run the code snippet to see how it looks like.
只需运行代码片段即可查看它的外观。
回答by Franz
You can use radio groups to achieve that functionality:
您可以使用无线电组来实现该功能：
<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null
回答by Ravi Makwana
Here other Example with simple jQuery and property data-checked:
这是其他带有简单 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>回答by Frank Sebastià
Besides all cited above, there are jQuery plugins that may help too:
除了上面提到的所有内容，还有一些 jQuery 插件也可能有帮助：
for individual checkboxes:
对于单个复选框：
- jQuery-Tristate-Checkbox-plugin: http://vanderlee.github.io/tristate/
- jQuery-Tristate-Checkbox-plugin：http: //vanderlee.github.io/tristate/
for tree-like behavior checkboxes:
对于树状行为复选框：
- jQuery Tristate: http://jlbruno.github.io/jQuery-Tristate-Checkbox-plugin/
EDITBoth libraries uses the 'indeterminate' checkbox attribute, since this attribute in Html5 is just for styling (https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state), the null value is never sent to the server (checkboxes can only have two values).
编辑两个库都使用“不确定”复选框属性，因为 Html5 中的此属性仅用于样式（https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state)，空值永远不会发送到服务器（复选框只能有两个值）。
To be able to submit this value to the server, I've create hidden counterpart fields which are populated on form submission using some javascript. On the server side, you'd need to check those counterpart fields instead of original checkboxes, of course.
为了能够将此值提交给服务器，我创建了隐藏的对应字段，这些字段在使用某些 javascript 的表单提交时填充。当然，在服务器端，您需要检查那些对应字段而不是原始复选框。
I've used the first library (standalone checkboxes) where it's important to:
我使用了第一个库（独立复选框），其中很重要：
- Initialize the checked, unchecked, indeterminate values
- use .val() function to get the actual value
- Cannot make work .state (probably my mistake)
- 初始化选中的、未选中的、不确定的值
- 使用 .val() 函数获取实际值
- 无法工作 .state（可能是我的错误）
Hope that helps.
希望有帮助。
回答by PhoneixS
Like @Franz answer you can also do it with a select. For example:
像@Franz 回答一样，您也可以通过选择来完成。例如：
<select>
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
With this you can also give a concrete value that will be send with the form, I think that with javascript indeterminate version of checkbox, it will send the underline value of the checkbox.
有了这个，您还可以给出一个将与表单一起发送的具体值，我认为使用 javascript 不确定版本的复选框，它将发送复选框的下划线值。
At least, you can use it as a callback when javascript is disabled. For example, give it an id and in the load event change it to the javascript version of the checkbox with indeterminate status.
至少，您可以在禁用 javascript 时将其用作回调。例如，给它一个 id 并在加载事件中将其更改为状态不确定的复选框的 javascript 版本。
