Question

我有一个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>

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

返回选择的图像

1 个答案: