如何从 css 复选框提交中发送值？

Question

以下内容与以下链接相关：选择复选框后，在 html 中需要 X 而不是勾选符号

input[type=checkbox].css-checkbox {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

input[type=checkbox].css-checkbox+label.css-label {
  padding-left: 20px;
  height: 15px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 15px;
  vertical-align: middle;
  cursor: pointer;
}

input[type=checkbox].css-checkbox:checked+label.css-label {
  background-position: 0 -15px;
}

.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/lite-x-red.png);
}

<form>
  <input id="demo_box_2" class="css-checkbox" type="checkbox" />
  <label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
  <input id="demo_box_3" class="css-checkbox" type="checkbox" />
  <label for="demo_box_3" name="demo_lbl_3" class="css-label">Selected Option</label>
</form>

我尝试提交以下CSS复选框

<input id="demo_box_2" class="css-checkbox" type="checkbox" checked/>
<label for="demo_box_2" value="true" name="demo_lbl_2" value="true" class="css-label">
  Selected Option
</label>

从上面它应该给了我

demo_lbl_2 = true

我错过了什么？

Answer 1

在 HTML 表单中，

name

和

value

属性需要位于相关的

input

元素上，而不是位于

label

上。否则提交表单时该字段及其值将不会发送到服务器。

<input id="demo_box_2" class="css-checkbox" type="checkbox" name="demo_lbl_2" value="true" checked/>
<label for="demo_box_2" class="css-label">
  Selected Option
</label>

参考：您的第一份表格（来自 MDN）