Вернуть выбранные изображения - PullRequest
0 голосов
/ 12 октября 2018

У меня есть 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>

1 Ответ

0 голосов
/ 12 октября 2018

Пожалуйста, попробуйте следующий код,

Когда вы нажимаете на изображение, оно сообщит значение соответствующего переключателя

/* 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>
...