Quest...">

Clever Geek Handbook

Change image with radio button and jquery

I've tried a few things and it doesn't seem to work the way I want it to.

<div id="box1">
    <h2>Question 1</h2>
    <ul>
        <li><input type="radio" id="q1a" name="q1"><label for="q1a">A</label></li>
        <li><input type="radio" id="q1b" name="q1"><label for="q1b">B</label></li>
        <li><input type="radio" id="q1c" name="q1"><label for="q1c">C</label></li>
        <li><input type="radio" id="q1d" name="q1"><label for="q1d">D</label></li>
    </ul>
    <img src="../images/q1.jpg" alt="" class="src">
</div>
<div id="box2">
    <h2>Question 2</h2>
    <ul>
        <li><input type="radio" id="q2a" name="q2"><label for="q2a">A</label></li>
        <li><input type="radio" id="q2b" name="q2"><label for="q2b">B</label></li>
        <li><input type="radio" id="q2c" name="q2"><label for="q2c">C</label></li>
        <li><input type="radio" id="q2d" name="q2"><label for="q2d">D</label></li>
    </ul>
            <img src="../images/q2.jpg" alt="" class="src">
</div>
<div id="box3">
    <h2>Question 3</h2>
    <ul>
        <li><input type="radio" id="q3a" name="q3"><label for="q3a">A</label></li>
        <li><input type="radio" id="q3b" name="q3"><label for="q3b">B</label></li>
        <li><input type="radio" id="q3c" name="q3"><label for="q3c">C</label></li>
        <li><input type="radio" id="q3d" name="q3"><label for="q3d">D</label></li>
    </ul>
            <img src="../images/q3.jpg" alt="" class="src">
</div>

      

        
        
        
      

    

I have 3 boxes, each with a unique ID. 4 questions each, each radio button labeled correctly. My script for changing it along these lines.

$('input[type=radio]').change(function(){
    $(this).next('img').attr('src','../images/'+$(this).attr('id')+'.jpg');
});

      

        
        
        
      

    

I understand that if I were to replace the first $ (this) with $ ('img') that it would work, but that would cause all the images to change and I want the radio to reflect the image to the same parent div. Any help pointing me in the right direction would be much appreciated.

I suspect that when I ask img, this is what I use for images, doesn't work the way I want it to.

Thank.

+3

jquery html radio-button

stepquick 12 Feb At 4:25 am

source to share

5 answers

next

selects only the next item using that item, you can use the method closest

and select the target image using the method find

.

$('input[type=radio]').change(function(){
    $(this)
         .closest('div')
         .find('img')
         .prop('src','../images/'+this.id+'.jpg');
});

      

        
        
        
      

    

+3

undefined 12 Feb At 4:27 am

source to share

img is the "next" sibling of the <ul>

switch ancestor (presumably). You can traverse the DOM easily with jQuery:

$(this).closest('ul').next('img')...

      

        
        
        
      

    

+2

Explosion pills 12 Feb At 4:27 am

source to share

$('input[type=radio]').change(function(){
    $(this).closest('div').find('img').attr('src','../images/'+$(this).attr('id')+'.jpg');
});

      

        
        
        
      

    

... closeest ()

+2

Jashwant 12 Feb At 4:27 am

source to share

try it

$('input[type=radio]').change(function(){
    $(this).closest('div').find('img')
    .attr('src','../images/'+$(this).attr('id')+'.jpg');
});

      

        
        
        
      

    

Here are the docs http://api.jquery.com/closest/

+2

Rohan kumar 12 Feb At 4:29 am

source to share

There is one change you need to make.

$(this).parent().parent().next('img').attr('src','../images/'+$(this).attr('id')+'.jpg');
      

        
        
        
      

    

what .parent().parent()

will do is get parent radio container and get tag img

.

+1

Dipesh parmar 12 Feb At 4:32 am

source to share

More articles:

All Articles