Как изменить стиль checkbox убрав галочку?

Question

[nepster-web]

Задумка такая, скрываем checkbox, пользователь жмет на слово и если checkbox checked, то слово подчеркиваем.

Нельзя нарушать разметку:

<label for="test"><input type="checkbox" id="test" name="test" /> Checkbox</label>

Возможно использование js. Хотя интересно было, можно ли как-то обойтись чистым css ?

Мой набросок вот тут:
jsfiddle.net/dqa50gjy

Answer 1

[IceJOKER]

htmlbook.ru/css/checked

как-то так - jsfiddle.net/dqa50gjy/3

Comments

[nepster-web]

спасибо, здорово. А что я там должен найти ? =)

[IceJOKER]

nepster09: ключ к ответу на ваш вопрос )

[nepster-web]

IceJOKER: все здорово, но важный момент. Структуру менять нельзя. Checkbox

[Сергей]

IceJOKER: ваш пример не работает немного)

[nepster-web]

Сергей: к сожалению нельзя менять разметку.

[IceJOKER]

Сергей: пардон ) все делал в консоле xD забыл туда перенести. обновил

[IceJOKER]

nepster09: можно просто повесить обработчик нажатия на label и к примеру менять класс - event.....$(this).toggleClass('underline');

[nepster-web]

IceJOKER: жаль простым css не получилось при такой разметке. Спасибо, так и сделаем.

Answer 2

[Сергей]

input:checked+label {text-decoration: underline}
jsfiddle.net/dqa50gjy/1

Comments

[nepster-web]

+ это же для следующего элемента. У нас input внутри label

[IceJOKER]

nepster09: какая разница внутри или снаружи? атрибут for для этого и сделан, чтоб соединить label и input

[Сергей]

nepster09: а зачем он вам внутри? можно смело убрать же, смотрите мой пример

[nepster-web]

Так сервер генерирует, сторонней библиотекой. Backend менять запретили.