我遇到了嵌套在 ul、li 元素中的 CSS/HTML 复选框的问题

Question

我在使用 HTML/CSS 复选框时遇到问题。我编写的代码在一组 ul/li 元素中有一个复选框。问题是如果我点击任何 li 元素的文本，它会划掉列表中的第一个成分，而不是划掉你点击的 li 元素。除了这个打嗝之外，复选框本身也可以正常工作。关于发生了什么以及如何解决此问题的任何建议或想法？

input[type=checkbox] + label {
  color: black;
  font-style: normal;
}
input[type=checkbox]:checked + label {
  color: #ccc;
  font-style: italic;
}

<ul style="list-style-type: none;">
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">2(6 ounce) filet mignon steaks</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">1 teaspoon olive oil</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Coarse kosher salt and freshly ground black pepper</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">1/2 cup red wine of your choice</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">2 tablespoons of butter</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Oven proof skillet/ Cast-iron skillet</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Oven mitts!</label>
  </li>
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">Thermometer</label>
  </li>
</ul>

Answer 1

这是因为每个<label> fors 都对应同一个name：它们都针对名称ossm。

这默认为第一个 ossm 元素，因此它们每个都是第一个 <label>。

要解决此问题，请为每个复选框设置一个唯一的 name（和相同的 <label for>）。

<li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">2(6 ounce) filet mignon steaks</label>
</li>
<li>
    <input type="checkbox" id="ossm2" name="ossm2">
    <label for="ossm2">1 teaspoon olive oil</label>
</li>

---

另外，你不应该让他们每个人都有id="ossm"。 ID's are supposed to be unique.

Answer 2

您在每个输入元素中都有相同的名称和 ID！每个输入都必须是不同的。

Answer 3

你需要修改for属性和id唯一 HTML 代码

<ul style="list-style-type: none;">
  <li>
    <input type="checkbox" id="ossm" name="ossm">
    <label for="ossm">2(6 ounce) filet mignon steaks</label>
  </li>
  <li>
    <input type="checkbox" id="ossm1" name="ossm">
    <label for="ossm1">1 teaspoon olive oil</label>
  </li>
  <li>
    <input type="checkbox" id="ossm2" name="ossm">
    <label for="ossm2">Coarse kosher salt and freshly ground black pepper</label>
  </li>
  <li>
    <input type="checkbox" id="ossm3" name="ossm">
    <label for="ossm3">1/2 cup red wine of your choice</label>
  </li>
  <li>
    <input type="checkbox" id="ossm4" name="ossm">
    <label for="ossm4">2 tablespoons of butter</label>
  </li>
  <li>
    <input type="checkbox" id="ossm5" name="ossm">
    <label for="ossm5">Oven proof skillet/ Cast-iron skillet</label>
  </li>
  <li>
    <input type="checkbox" id="ossm6" name="ossm">
    <label for="ossm6">Oven mitts!</label>
  </li>
  <li>
    <input type="checkbox" id="ossm7" name="ossm">
    <label for="ossm7">Thermometer</label>
  </li>
</ul>

css代码

input[type=checkbox] + label {
  color: black;
  font-style: normal;
}
input[type=checkbox]:checked + label {
  color: #ccc;
  font-style: italic;
}