输入类型复选框值答案

【问题标题】：Input type checkbox values输入类型复选框值
【发布时间】：2018-06-11 12:01:36
【问题描述】：

我注意到输入在检查时没有得到检查值。这是有效的 html 吗？

我尝试将它与 php 表单一起使用，如果选中，则值为“on”。

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox */

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}


/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
  background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.container input:checked~.checkmark {
  background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container input:checked~.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<h1>Custom Checkboxes</h1>
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

【问题讨论】：

console.log(document.querySelectorAll(":checked")) 显示复选框的数量。问题是什么？检查代码时看不到选中的属性？
要通过 PHP 表单获取所有复选框的值，您应该为它们提供不同的names 或相同的以[] 结尾的name（例如name="checkboxes[]"），所以PHP 将能够从它们的值创建一个数组。

标签： html checkbox input

【解决方案1】：

复选框的值是 value 属性所说的任何值，而（在复选框的情况下）on 作为默认值。

它的检查状态（可通过 JS 中的checked 属性获得）决定它是否是一个成功的控件（即是否出现在提交的表单数据中）。

【讨论】：

【解决方案2】：

只需删除 checked="checked" 以便不会检查该初始值

/* When the checkbox is checked, add a blue background */

.container input:checked~.checkmark {
  background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container input:checked~.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<h1>Custom Checkboxes</h1>
<label class="container">One
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

【讨论】：