Вернуть выбранные изображения
У меня есть HTML-код. Должно быть 2 вопроса, каждый из которых предлагает 4 ответа, которые являются изображениями. Как я могу вернуть в результате выбранные изображения с помощью javascript?
<div class = "quest">
<div class = "answer">
<input type = "radio" value = "car1" class = "inputimg"/>
<label for = "car1">
<img src = "spare.png">
</label>
</div>
<div class = "answer">
<input type = "radio" value = "car2" class = "inputimg" />
<label for = "car2">
<img src = "spare.png">
</label>
</div>
<div class = "answer">
<input type = "radio" value = "car3" class = "inputimg" />
<label for = "car3">
<img src = "spare.png">
</label>
</div>
<div class = "answer">
<input type = "radio" value = "car4" class = "inputimg" />
<label for = "car4">
<img src = "spare.png">
</label>
</div>
</div>
Выбранное радио можно извлечь с помощью формы запроса, см. этот пример jsfiddle.net/api/mdn. ссылка: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radi o
чистый js путь, document.querySelector('input[name = "contact"]:checked').value;. если jquery - вариант, попробуйте этот $("input[name=rate]:checked").val()
Кроме того, добавьте атрибут name ко всем переключателям с одинаковым значением имени, иначе каждый переключатель будет работать как индивидуально, а не как единый набор.
Результатом должно быть 2 выбранных изображения, например, человек выбирает изображение car1 для первого вопроса и car5 для второго. Итак, в результате оба выбранных изображения должны отображаться как вывод, возможно, в новом div, но не в предупреждении или чем-то еще, проблема для меня - вернуть не только значение, но и изображение
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Пожалуйста, попробуйте приведенный ниже код,
Когда вы нажимаете на изображение, оно предупреждает значение соответствующей радиокнопки.
/* using jquery*/
function test(dhis){
var val=dhis.attr('src');
$('#displayimg').append(' <img src = "'+val+'">')
}
/* using javascript*/
function test1(dhis){
var val=dhis.getAttribute('src');
var div = document.getElementById('displayimg');
div.innerHTML +=' <img src = "'+val+'">'
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "quest">
<div class = "answer">
<input type = "radio" value = "car1" class = "inputimg" name = "test" id = "car1"/>
<label for = "car1" >
<img src = "spare.png" onclick = "test($(this));test1(this)">
</label>
</div>
<div class = "answer">
<input type = "radio" name = "test" value = "car2" class = "inputimg" id = "car2" />
<label for = "car2" >
<img src = "spare.png" onclick = "test($(this));test1(this)">
</label>
</div>
<div class = "answer">
<input type = "radio" name = "test" value = "car3" class = "inputimg" id = "car3"/>
<label for = "car3">
<img src = "spare.png" onclick = "test($(this));test1(this)">
</label>
</div>
<div class = "answer">
<input type = "radio" name = "test" value = "car4" class = "inputimg"id = "car4" />
<label for = "car4">
<img src = "spare.png" onclick = "test($(this));test1(this)">
</label>
</div>
</div>
<div id = "displayimg">
</div>проблема в том, что мне нужно, чтобы эти 2 выбранных изображения отображались в новом div, а не в значениях предупреждений
У меня есть еще один вопрос по этому поводу. divs "answer" накладывают на них эффект, поэтому я не могу щелкнуть изображение. Я поместил функцию onclick в div и заменил getAttribute на getElementsByTagName ('img'), но они не отображались в innerHTML
Объясните, пожалуйста, каков ваш "результат"