Смена картинки при выборе radio
Привет, помогите реализовать след. функционал.
Нужно чтобы при выборе radio опции менялась картинка. Примерный код такой <div><img src="оригинальная картинка" /></div> <div class="radio"> <label> <input data-value="новая картинка" type="radio" name="тут мой параметр" value="тут мой параметр"> Опция </label> </div> Спасибо! |
Вот этот способ работает https://javascript.ru/forum/events/2...hyu-radio.html
Но есть проблема, в моих input свое value и name |
tukker,
$('#test').attr('src', $(this).data('value'));
|
Благодарю, все заработало
|
А не подскажите, можно ли модифицировать скрипт чтобы при открытии страницы и автовыбором первого radio картинка менялась, а то оно работает только по клику
|
tukker,
не понял |
Так?
<!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>
|
:) как вариант строка 11
}).eq(0).click().click(); |
| Часовой пояс GMT +3, время: 08:31. |