Замена нескольких флажков - действует только в первом ряду флажков

0

Я пытаюсь заменить флажки изображениями. У меня скрытые входы и изображения, показанные с помощью метки для флажков, но когда я нажимаю на любой из флажков, он обновляет только первую строку флажков. Что я делаю не так?

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/

Любая помощь будет принята с благодарностью. Я понятия не имею, что здесь происходит!

Теги:
image
checkbox
replace

1 ответ

2
Лучший ответ

Проблема в том, что ваши элементы label ищут id, к которому вы привязали их, и у вас есть одинаковый ID для каждой строки. Вам нужен уникальный id для каждого чекбокса и соответствовать 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/

  • 0
    Я бы даже пошел дальше и сказал: «Вы должны использовать уникальный id ». ;)
  • 0
    Ах, да, это имеет смысл. Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню