Форум

tukker · #1 (**permalink**) 14.07.2017, 13:49

Привет, помогите реализовать след. функционал.
Нужно чтобы при выборе radio опции менялась картинка. Примерный код такой

<div><img src="оригинальная картинка" /></div>

<div class="radio">
<label>
<input data-value="новая картинка" type="radio" name="тут мой параметр" value="тут мой параметр">
Опция
</label>
</div>

Спасибо!

tukker · #2 (**permalink**) 14.07.2017, 14:13

Вот этот способ работает https://javascript.ru/forum/events/2...hyu-radio.html

Но есть проблема, в моих input свое value и name

рони · #3 (**permalink**) 14.07.2017, 14:24

tukker,

$('#test').attr('src', $(this).data('value'));

tukker · #4 (**permalink**) 14.07.2017, 14:26

Благодарю, все заработало

tukker · #5 (**permalink**) 14.07.2017, 15:01

А не подскажите, можно ли модифицировать скрипт чтобы при открытии страницы и автовыбором первого radio картинка менялась, а то оно работает только по клику

рони · #6 (**permalink**) 14.07.2017, 15:15

tukker,
не понял

Dilettante_Pro · #7 (**permalink**) 14.07.2017, 17:55

Так?

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function (){
	$(':radio').click(function (){
		if (this.checked) {
			$('#test').attr('src',this.value);
		}
	});
        var sel =  document.querySelectorAll('input[type=radio]')[0];
        sel.checked = true;
        $(sel).click();
        
});
</script>
</head>
<body>
<img id='test' src='http://javascript.ru/forum/images/smilies/blink.gif' />
<div>
	<label>
		<input type='radio' name='scr' value='http://javascript.ru/forum/images/smilies/smile.gif' />
		Screen 1
	</label>
</div>
<div>
	<label>
		<input type='radio' name='scr' value='http://javascript.ru/forum/images/smilies/wink.gif' />
		Screen 2
	</label>
</div>
<div>
	<label>
		<input type='radio' name='scr' value='http://javascript.ru/forum/images/smilies/laugh.gif' />
		Screen 3
	</label>
</div>
</body>
</html>

рони · #8 (**permalink**) 14.07.2017, 19:28

как вариант строка 11
}).eq(0).click().click();

Форум

Справочник

Discord чат

Курсы javascript