Question

我的输入类型=“复选框”在选中时的行为有所不同，它仅适用于第一个输入类型=“复选框”的一个元素，但是对于其他输入，它的工作方式不正确。

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>

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

我该如何解决这个问题？

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

为什么输入类型复选框在选中后会有不同的行为？

1 个答案: