Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2017, 13:49
Новичок на форуме
Отправить личное сообщение для tukker Посмотреть профиль Найти все сообщения от tukker
 
Регистрация: 14.07.2017
Сообщений: 4

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

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

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

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2017, 14:13
Новичок на форуме
Отправить личное сообщение для tukker Посмотреть профиль Найти все сообщения от tukker
 
Регистрация: 14.07.2017
Сообщений: 4

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

Но есть проблема, в моих input свое value и name
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2017, 14:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

tukker,


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

Последний раз редактировалось рони, 14.07.2017 в 14:29. Причина: кавычки
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2017, 14:26
Новичок на форуме
Отправить личное сообщение для tukker Посмотреть профиль Найти все сообщения от tukker
 
Регистрация: 14.07.2017
Сообщений: 4

Благодарю, все заработало
Ответить с цитированием
  #5 (permalink)  
Старый 14.07.2017, 15:01
Новичок на форуме
Отправить личное сообщение для tukker Посмотреть профиль Найти все сообщения от tukker
 
Регистрация: 14.07.2017
Сообщений: 4

А не подскажите, можно ли модифицировать скрипт чтобы при открытии страницы и автовыбором первого radio картинка менялась, а то оно работает только по клику
Ответить с цитированием
  #6 (permalink)  
Старый 14.07.2017, 15:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

tukker,
не понял
Ответить с цитированием
  #7 (permalink)  
Старый 14.07.2017, 17:55
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Так?

<!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>

Последний раз редактировалось Dilettante_Pro, 14.07.2017 в 18:22.
Ответить с цитированием
  #8 (permalink)  
Старый 14.07.2017, 19:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

как вариант строка 11
}).eq(0).click().click();
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки при нажатии на маленькие картинки comb Элементы интерфейса 4 23.03.2015 01:08
Смена класса у отдельного div при нажатии на ссылку Maxim-Ra Элементы интерфейса 6 15.02.2015 12:20
Такое возможно? При выборе radio надо чтобы менялось значение в input Stas111111 Общие вопросы Javascript 11 23.05.2014 00:41
Смена картинки при наведении курсора Heidel jQuery 1 06.11.2012 22:03
Смена картинки в шапке при перезагрузки wcb-falcon Элементы интерфейса 12 13.07.2010 23:36