html - 我在使用嵌套在 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> for s 是相同的 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.