为什么输入类型复选框在选中时会有所不同？答案

【问题标题】：Why does input type checkbox act differently when it's checked?为什么输入类型复选框在选中时会有所不同？
【发布时间】：2018-01-22 14:48:24
【问题描述】：

我的 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" 的第一个元素。每个单独的输入都应单独突出显示。

我该如何解决这个问题？

【问题讨论】：

标签： html css checkbox styles

【解决方案1】：

您的 label-for 属性的 id 与第一个复选框匹配，因此它仅选中/取消选中第一项。确保您的复选框 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>

【讨论】：