html - 为什么输入类型复选框在选中时表现不同？

Question

我的 input type = "checkbox"在选中时表现不同，它只适用于第一个 input type="checkbox"的一个元素，但是对于其他输入它工作不正确。

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 1px solid #cccccc;
    cursor: pointer;
    transition: 0.3s;
}

input[type="checkbox"]:checked {
    background-color: #d9a83f;
}

<div class="first_body">
    <input type="checkbox" id="checkbox__id" class="checkbox regular_checkbox" value="value" />
    <label for="checkbox__id">Европейская</label>
</div>
<div class="last_body">
    <div class="last_body_child">
        <input type="checkbox" id="checkbox__id" class="checkbox regular_checkbox" value="value" />
        <label for="checkbox__id">Италия</label>
    </div>
    <div class="last_body_child">
        <input type="checkbox" class="checkbox regular_checkbox" />
        <label for="checkbox__id">Франция</label>
    </div>
</div>

当您单击其他输入时，即使您单击其他输入，也只会选中输入类型为“checkbox”的第一个元素。每个单独的输入都应单独突出显示。

我该如何解决这个问题？

Answer 1

您的 id for label-for 属性与第一个复选框匹配，因此它唯一选中/取消选中第一项。确保您的复选框 ID 与属性标签匹配。我想这就是你想要的:jsfiddle

<div class="first_body">
<input type="checkbox" id="checkbox__id" class="checkbox regular_checkbox" value="value" />
<label for="checkbox__id">Европейская</label>
</div>
<div class="last_body">
<div class="last_body_child">
    <input type="checkbox" id="checkbox__id_2" class="checkbox regular_checkbox" value="value" />
    <label for="checkbox__id_2">Италия</label>
</div>
<div class="last_body_child">
    <input type="checkbox" id="checkbox__id_3" class="checkbox regular_checkbox" />
        <label for="checkbox__id_3">Франция</label>
    </div>
</div>