提交不确定的复选框值 | CSS-Tricks

存在所谓的不确定的复选框值。它是一个复选框（<input type="checkbox">），既不是选中状态，也不是未选中状态。它是处于不确定的状态。

我们甚至可以将复选框选择到这种状态，并使用 CSS 进行样式设置！

一些需要注意的要点

只能通过 JavaScript 设置。没有 HTML 属性或值可以用于此。
它不会 POST（或 GET 或其他任何操作）或具有值。它就像未选中一样。

所以，假设您有一个像这样的表单

<form action="" method="POST" id="form">
  
  <input name="name" type="text" value="Chris" />
  
  <input name="vegetarian" type="checkbox" class="veg">
  
  <input type="submit" value="Submit">
  
</form>

并且，出于任何原因，您将该复选框设置为不确定状态

let veg = document.querySelector(".veg");
veg.indeterminate = true;

如果您序列化该表单并查看将要 POST 的内容，您将得到 "name=Chris"。复选框没有值。相反，如果您在 HTML 中选中了复选框，并且没有在 JavaScript 中对其进行操作，您将得到 "name=Chris&vegetarian=on"。

显然，这是设计使然。复选框旨在表示布尔值，并且**不确定的值只是一个美学上的东西，用于指示视觉上的“子”复选框处于混合状态（一些选中，一些未选中）。**这很好。现在如果不造成网站严重损坏，就无法更改它。

但是假设您确实需要在服务器上知道复选框是否处于不确定的状态。我想到的唯一方法是使用一个与之同步的隐藏的辅助输入。

<input name="vegetarian" type="checkbox" class="veg">
<input name="vegetarian-value" type="hidden" class="veg-value">

let veg = document.querySelector(".veg");
let veg_value = document.querySelector(".veg-value"); 
veg.indeterminate = true;
veg_value.value = "indeterminate";

我已经设置了一个输入的 indeterminate 值以及将另一个隐藏输入的值设置为 "indeterminate"，我可以将其 POST。序列化后，它看起来像 "name=Chris&vegetarian-value=indeterminate"。足够好了。

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的示例您可以 POST 中间值吗？。

Thomas Higginbotham

# 2018年10月15日

我认为，与其创建额外的隐藏表单控件，我更倾向于设置复选框的值。由于您使用 JavaScript 使其处于不确定状态，因此您不妨在提交表单时使用 JavaScript 将其状态更改为选中状态，以便它发送其值。

const form = document.querySelector('form');
const checkbox = document.querySelector('input[type=checkbox]');

checkbox.indeterminate = true;
checkbox.value = 'indeterminate';

form.addEventListener('submit', () => {
  if (checkbox.indeterminate) {
    checkbox.checked = true;
  } else {
    checkbox.value = 'on';
  }
}, false);

zzzzBov

小细节

它不会 POST（或 GET 或其他任何操作）或具有值。它就像未选中一样。

复选框的 checked 状态被复选框的 indeterminate 状态遮盖。如果在应用不确定状态时复选框处于选中状态，则复选框值仍将与表单一起提交（示例）。

Emil

一种 CSS-Tricks 式的方法是模拟一些单选按钮使其看起来像复选框，例如这样

无值 = 不确定。

评论