如何仅在选中复选框时提交复选框，仅在选中或取消选中时取消选中复选框

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的问题。

＆＃13;
＆＃13;
<form>
  <input name="checkbox" type="checkbox" value="1" checked />
</form>
＆＃13;
＆＃13;
＆＃13;

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

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”]：选中
• 您可以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>