Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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;
}

我在嵌入ul，li元素的CSS / HTML复选框时遇到问题

3 个答案: