如何将单选按钮值传递给 Javascript 中的 img 链接？

Question

I am trying to pass the radio button value to Javascript instead of the whole img link but no image is being display. If I pass the whole image link to Javascript the image is able to show in the display.

 $(document).ready(function () { $(':radio').change(function (e) { //clear the div $('#display').html(''); //update the div $(':radio:checked').each(function (ind, ele) { $('#display').html('<img src="/images/"') + val() + '.png">'); }); }); });

 <input type="radio" name="vehicle" value="motor_1"><img src="/images/motor_1.png" width="150px" height="150px">

Answer 1

For jQuery val() method instead of just calling val() you want:

$(this).val()

Or the native element property:

this.value

Answer 2

@jmp the goal is to display the image when it is checked

In general, this code would display an img element when it is clicked

Code

<style>img{ display: none}</style>
<input type="radio" name="vehicle" value="motor_1">
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/11/24/16/cat.jpg" >
<script>
(async () => {
    let radioBtn = document.querySelector("body > input[name=vehicle]");
    radioBtn.onclick = (event) => {
        if (radioBtn && radioBtn.checked) {
            let img = document.querySelector('img');
            img.style.display = 'inherit';
        }
    }
})();
</script>

In this case, it would seem we want to parameterize the src string. Does this answer the question? I used the reference from https://stackoverflow.com/a/62853517/112233

code

$('#display').html(`<img src="/images/${ele.value}.png">`);

assuming the ele is the radio button element.