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

小提琴： http://jsfiddle.net/D351GN3R/8jW43/

非常感谢任何帮助。我不知道这里发生了什么！

Answer 1

问题在于，您的label元素正在寻找绑定它们的id，并且每行都有相同的ID s。每个复选框都需要唯一的id s，并且匹配每个for上的label，如下所示：

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

小提琴：http://jsfiddle.net/EWpLq/

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

1 个答案: