Я пытаюсь заменить флажки изображениями. У меня скрытые входы и изображения, показанные с помощью метки для флажков, но когда я нажимаю на любой из флажков, он обновляет только первую строку флажков. Что я делаю не так?
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/
Любая помощь будет принята с благодарностью. Я понятия не имею, что здесь происходит!
Проблема в том, что ваши элементы 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/
id
». ;)