html - 多个复选框图像替换 - 仅影响第一行复选框

Question

我正在尝试用图像替换复选框。我隐藏了输入并使用复选框的标签显示了图像，但是当我单击任何复选框时，它只会更新第一行复选框。我做错了什么？

HTML:

<form action="">
    <div>
        <input type="checkbox" id="make-admin">
        <label for="make-admin"></label>
        <input type="checkbox" id="remove-member">
        <label for="remove-member"></label>
    </div>
    <div>
        <input type="checkbox" id="make-admin">
        <label for="make-admin"></label>
        <input type="checkbox" id="remove-member">
        <label for="remove-member"></label>
    </div>
    <div>
        <input type="checkbox" id="make-admin">
        <label for="make-admin"></label>
        <input type="checkbox" id="remove-member">
        <label for="remove-member"></label>
    </div>
</form>

CSS:

input[type="checkbox"]{
    display: none;
}
    input[type="checkbox"] + label:before{
    content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png');
}
    input[type="checkbox"]:checked + label:before{
    content: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png');
}

fiddle : http://jsfiddle.net/D351GN3R/8jW43/

如有任何帮助，我们将不胜感激。我不知道这里发生了什么!

Answer 1

问题是您的 label 元素正在寻找您将它们绑定(bind)到的 id 并且每一行都有相同的 ID .您需要为每个复选框设置唯一的 id，并匹配每个 label 上的 for，如下所示:

<form action="">
<div>
    <input type="checkbox" id="make-admin">
    <label for="make-admin"></label>
    <input type="checkbox" id="remove-member">
    <label for="remove-member"></label>
</div>
<div>
    <input type="checkbox" id="make-admin2">
    <label for="make-admin2"></label>
    <input type="checkbox" id="remove-member2">
    <label for="remove-member2"></label>
</div>
<div>
    <input type="checkbox" id="make-admin3">
    <label for="make-admin3"></label>
    <input type="checkbox" id="remove-member3">
    <label for="remove-member3"></label>
</div>
</form>

fiddle :http://jsfiddle.net/EWpLq/