Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Переключения type=checked при нажатии на картинки (https://javascript.ru/forum/misc/57402-pereklyucheniya-type%3Dchecked-pri-nazhatii-na-kartinki.html)

subbziro 02.08.2015 16:42

Переключения type=checked при нажатии на картинки
 
Доброго времени суток.

Суть проблемы такова, есть 2 картинки и 2 input radio, при нажатии на одну картинку включается 1 input, соответственно при нажатии на другую - другой input.

Написал скрипт, он переключает только один раз, хотелось бы чтобы можно было тыкать на картинку и все время менялся input.
Если глупый вопрос или такая тема уже была, извините, я новичок;)

EmperioAf 02.08.2015 16:59

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>ГГ</title>
<style>
*{
    margin:0;
    padding:0;
    outline: 0;
}

img{
    display: block;
    margin: 50px;
    cursor: pointer;
}

input{
    margin-left: 100px;
}
</style>
</head>
<body>
    <img src="http://teonote.ru/wp-content/uploads/sueta-poglotila.jpg" width="500" height="300" alt="">
    <input type="radio" checked>
    <img src="http://www.holylife.info/sites/default/files/cуета%20сует_0.jpg" width="500" height="300" alt="">
    <input type="radio">
    <script>
    var inputs = document.querySelectorAll('input[type="radio"]');
    var images = document.querySelectorAll('img');
    images[0].onclick = function(){
        inputs[0].checked = true;
        inputs[1].checked = false;
    }

    images[1].onclick = function(){
        inputs[0].checked = false;
        inputs[1].checked = true;
    }
    </script>

</body>
</html>

subbziro 02.08.2015 17:08

EmperioAf,
Спасибо большое! то что надо)

laimas 02.08.2015 17:22

Цитата:

Сообщение от subbziro
Написал скрипт, он переключает только один раз, хотелось бы чтобы можно было тыкать на картинку и все время менялся input.

Для этого скрипта не надо. Поместите кнопки в label, а изображение как фоновые для label. Для того чтобы работало правильно, имена у кнопок должны быть одни и те же.


Часовой пояс GMT +3, время: 15:31.