我在嵌入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应该是唯一的.