Как изменить текст при radio:checked?

Question

[Антон Мелентьев]

<input type="radio" id="vari4" name="pr_otv" value="4" />
<label for="vari4" title="Укажите правильный вариант ответа">
     <span>Вариант</span>
</label>

Вот такая схема. Как изменить текст при активной кнопке радио?

Answer 1

[axeax]

#vari4:checked + label span{
    content: 'другой текст';
}

Comments

[riot26]

ИМХО некрасиво логику выводить в стили

[axeax]

в простых ситуациях бывает очень красиво. Ок, уговорили.
$('#vari4').on('click', function(){
if($(this).val()
$('label[for="vari4"] span').html('другой текст');
else
$('label[for="vari4"] span').html('первый текст');
});

[Антон Мелентьев]

axeax: это только при клике

[axeax]

if($(this).prop('checked') условие неправильно написал
и в 1 строке тогда $('#vari4').on('click focus select change', function(){

[Шаров Дмитрий]

Антон Мелентьев:
$('#vari4').on('change', function(){});

[Шаров Дмитрий]

Антон Мелентьев:
$('#vari4').on('change', function(){
if($(this).prop('checked')) $('label[for="vari4"] span').html('другой текст');
else $('label[for="vari4"] span').html('первый текст');
});

[Антон Мелентьев]

Шаров Дмитрий: обратно не меняется

[axeax]

одна радиокнопка не выключается, это же не чекбокс

[Антон Мелентьев]

axeax: у меня их 4, я просто одну выложил

[axeax]

=) ну вот и получили ответ для уникального варианта который выложили. Если нужен готовый код опишите полностью задачу. Если нужно на мысль натолкнуть чтобы самому подумать - мы это сделали

[Антон Мелентьев]

ладно, спасибо

[Антон Мелентьев]

Шаров Дмитрий: Уже всю голову сломал, обратно не меняется

[Шаров Дмитрий]

Антон Мелентьев: Загадка кроется там где стоит id и проверяется change только на одном конкретном элементе. если у всех четырех имя pr_otv, то $('input[name=pr_otv]').on('change', function....
либо задайте четырем радиокнопкам общий класс

[Антон Мелентьев]

я задал сразу, но всеравно не меняет, как теперь смотрите ниже

Answer 2

[Антон Мелентьев]

<input class="varrad" type="radio" id="vari1" name="pr_otv" value="1" required oninvalid="this.setCustomValidity('Требуется указать правильный вариант ответа!')" oninput="setCustomValidity('')" />
<label for="vari1" class="dib sn variant" title="Укажите правильный вариант ответа">
	<span class="fwb red ml30 vvar">Вариант</span>
</label>
<input class="varrad" type="radio" id="vari2" name="pr_otv" value="2" required oninvalid="this.setCustomValidity('Требуется указать правильный вариант ответа!')" oninput="setCustomValidity('')" />
<label for="vari2" class="dib sn variant" title="Укажите правильный вариант ответа">
	<span class="fwb red ml30 vvar">Вариант</span>
</label>
<input class="varrad" type="radio" id="vari3" name="pr_otv" value="3" required oninvalid="this.setCustomValidity('Требуется указать правильный вариант ответа!')" oninput="setCustomValidity('')" />
<label for="vari3" class="dib sn variant" title="Укажите правильный вариант ответа">
	<span class="fwb red ml30 vvar">Вариант</span>
</label>
<input class="varrad" type="radio" id="vari4" name="pr_otv" value="4" required oninvalid="this.setCustomValidity('Требуется указать правильный вариант ответа!')" oninput="setCustomValidity('')" />
<label for="vari4" class="dib sn variant" title="Укажите правильный вариант ответа">
	<span class="fwb red ml30 vvar">Вариант</span>
</label>

$('.varrad').change(function(){
	if($(this).prop('checked')) $(this).next('.variant').children('.vvar').text('Правильный');
	else $(this).next('.variant').children('.vvar').text('Вариант');
});

Comments

[axeax]

https://jsfiddle.net/aLebkd5w/1/

[Антон Мелентьев]

выход из положения), огромное спасибо