如何仅在选中，仅未选中以及选中或未选中时提交复选框

Question

某人可能希望input[type="checkbox"] 提供 3 种可能的行为

1. input[type="checkbox"]:checked时提交值，
2. input[type="checkbox"]:not(:checked)时提交值
3. input[type="checkbox"] 选中或取消选中时提交值

1。勾选后提交

这是大多数人想要的行为，很幸运，因为这是元素的默认行为。

2。未选中用例时对面提交

假设您创建了一个默认检查所有字段的表单

<input type="checkbox" checked value="1" name="1" />Check me if Yes
<input type="checkbox" checked value="1" name="2" />Check me if Yes
...
...
<input type="checkbox" checked value="1" name="49" />Check me if Yes
<input type="checkbox" checked value="1" name="50" />Check me if Yes

我们创建了表单，因此我们知道默认值。

只提交和处理（服务器）更改的值是有意义的。在这种情况下，它是未选中的复选框。

这是使用双重否定并正常提交的替代方法。

<input type="checkbox" value="0" name="1" />Check me if No
<input type="checkbox" value="0" name="2" />Check me if No
...
...
<input type="checkbox" value="0" name="49" />Check me if No
<input type="checkbox" value="0" name="50" />Check me if No

3。选中或未选中时提交

如果您可能希望将两个可能的值发送到服务器，则可以使用此方法。

<input type="checkbox" default="NO" value="YES" />Check me if YES

数字 1. 非常简单，但信不信由你，这是关于 stackoverflow 的一个问题。

<form>
  <input name="checkbox" type="checkbox" value="1" checked />
</form>

那么如何实现另外两个呢？

Answer 1

1号input[type="checkbox"]:checked

<form>
  <input name="checkbox" type="checkbox" value="1" checked />
</form>

第 2 和第 3 项无法完成，因为

• input[type="checkbox"]:not(:checked)不能不提交
• input[type="checkbox"]:checked只能提交
• 您无法更改此默认行为

但是

2号

• 您可以使 input[type="checkbox"]:not(:checked) 看起来像 `input[type="checkbox"]:checked
• 您可以使input[type="checkbox"]:checked 看起来像input[type="checkbox"]:not(:checked)

form {
  margin: 50px;
}
input[type="checkbox"] {
  left: -9999px;
}
input[type="checkbox"],
input[type="checkbox"] + label:before,
input[type="checkbox"] + label:after {
  position: absolute;
  font-size: 13.3333px;
  font-weight: bold;
}
input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
}
input[type="checkbox"] + label:before {
  content: '';
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -ms-appearance: checkbox;
  appearance: checkbox;
}
input[type="checkbox"] + label:after {
  content: '✔';
  top: -3px;
}
input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
}
input[type="checkbox"]:checked + label:after {
  opacity: 1;
}
input[type="checkbox"]:not(:checked).opposite + label:after {
  opacity: 1;
}
input[type="checkbox"].opposite:checked + label:after {
  opacity: 0;
}

<form>
  <input id="checkbox" name="checkbox" type="checkbox" value="1" checked class="opposite" />
  <label for="checkbox"></label>
</form>

• input[type="checkbox"] 不适用于此类行为
• input[type="radio"] 专为此类行为而设计
  • 你可以让input[type="radio"]看起来像input[type="checkbox"]

form{margin:50px; }

.radio-switch {
  height:13px;
  position: relative;
}

.radio-switch > input[type="radio"] {
  /*style radio buttons */
  /* There is so many css examples of how to do this */
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -ms-appearance: checkbox;
  appearance: checkbox;
  position: absolute;
  top: 0;
  left: 0;
}

input[type="radio"].unchecked {
  opacity: 0;
}

input[type="radio"].checked,
input[type="radio"].unchecked {
  z-index: 2;
}

input[type="radio"]:checked.checked,
input[type="radio"]:checked.unchecked {
  z-index: 1;
}

<form>
  <div class="radio-switch">
    <input type="radio" checked class="checked" value="1" name="checkbox">
    <input type="radio" class="unchecked" value="0" name="checkbox">
  </div>
</form>