Как изменить текст label checkbox'a с помощью JavaScript?

Question

[Михаил]

Здравствуйте! У меня не получается изменить текст около чекбокса. По умолчанию там написан текст "В избранное". А при нажатии на чекбокс текст должен поменяться на "В избранном". И что я только не делал! И this ставил, и id элемента, и много всего пробовал, никак не получается... если можно подскажите кто-нибудь !
Вот ссылка на Codepen: https://codepen.io/mk3mk/pen/YdMyoY

Answer 1

[lb-web]

https://codepen.io/anon/pen/KbYVJg
Во-первых у вас текст пытается меняться там где его нету, т.к. текст в label, а вы обращаетесь к input на который нажали.
Во-вторых если вы будете менять текст у label, то и input пропадет, поэтому я добавил span
В третьих - есть более адекватные проверки на cheked, которую я добавил

Comments

[Михаил]

да ! вроде работает ! а почему в первом случае
.html('');
а во втором случае
.text('');
Или все равно ? работает и так и так

[lb-web]

Михаил, а, да я просто чет поменял там, а там забыл.
Можно оставить text и там и там.

[Михаил]

да, спасибо большое !

Answer 2

[FLighter]

Как уже сказали выше, у вас идет обращение к чекбоксу, а не к label + при обращении label.text исчезнет и чекбокс. Вот один из не лучших вариантов решения

$('#favourites_flag').change(function()
{
       var checkbox = $(this),
           label = $('#favourites_flag_label'),
           tyu = $('#tyu');
    if (!checkbox.is(':checked')) {
        label.get(0).lastChild.nodeValue = 'В избранное';
        tyu.css({'background':'green'});
    } else {
        label.get(0).lastChild.nodeValue = 'В избранном';
        tyu.css({'background':'gold'});
    };
});

Comments

[lb-web]

Вообще плохое решение, в контексте того, если оно будет использоваться не с одним чекбоксом, а с 10тью например.

[Михаил]

не работает что-то .. хотя вариант интересный

[FLighter]

Михаил, откройте свой пример и замените js, у меня работало)

[Михаил]

да! работает ! спасибо !

Answer 3

[Оксана ...]

$(this).parent(“label”).text(“в избранном”);

Comments

[Евгений]

тогда удалится и checkbox

[Михаил]

с parent - не работает

[lb-web]

Михаил, потому что там перент указан не правильно))

[Оксана ...]

Михаил, работает - его в ту часть вставлять, где css на gold меняется. Но срабатывает если флажок уже стоит, а не при установке. При этом, сам чекбокс пропадает. Короче, логику скрипта переписать надо. Там внизу уже объяснили подробно.