在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都是针对同一个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;
}