CODEWITHSUNDEEP
jqueryhtmlradio-button
Aries Azad
Aries Azad

Reputation: 356

Change image if radio button is selected

I have these two radio buttons where I have hidden the input marks and replaced them with images: 

<div class="card-block center-style">
    <div class="form-check inline-style">
        <label class="form-check-label question-label">
            <input type="radio" class="form-check-input" name="ps-qna-1" id="ps-form-1" value="Homeowner">
            <div class="shadow-active">
                <div class="circle"><img src="images/homeowner.png" id="img-1"><span>Homeowner</span></div>
            </div>
        </label>
    </div>
    <div class="form-check inline-style">
        <label class="form-check-label question-label">
            <input type="radio" class="form-check-input" name="ps-qna-1" id="ps-form-2" value="Business">
            <div class="shadow-active">
                <div class="circle"><img src="images/business_servicer.png" id="img-2"><span>Business/Servicer</span></div>
            </div>
        </label>
    </div>
</div>

I need the images to swap out if the radio button is selected. If not, I need the image to stay what it is in the HTML. I have this for my JQuery:

$(document).ready(function() {
$('input[name="ps-qna-1"]:radio').click(function(){
    if ($('input[name=ps-qna-1]:checked').val() == "Homeowner") {
        $("#img-1").attr("src","images/homeowner-active.png");

    } else if ($('input[name=ps-qna-1]:checked').val() == "Business") {
        $("#img-2").attr("src","images/business-servicer-active.png");

    }
});
});

But my code is not working. It is not swapping out the images. What am I doing wrong here? Any help is good. Thanks!

I have added two pictures of what the radio buttons look like before selection and how it looks after one is selected. but I need that house image swapped out to a different house image with color in it. Hope this wasn't too confusing.

enter image description here enter image description here

Upvotes: 0

Views: 2098

Answers (1)

Barmar
Barmar

Reputation: 781068

When you add the -active URL to one image, add the normal URL to the other.

$(document).ready(function() {
    $('input[name="ps-qna-1"]:radio').click(function(){
        switch($(this).val()) {
        case "Homeowner":
            $("#img-1").attr("src","images/homeowner-active.png");
            $("#img-2").attr("src","images/business-service.png");
            break;
        case "Business":
            $("#img-1").attr("src","images/homeowner.png");
            $("#img-2").attr("src","images/business-servicer-active.png");
            break;
        }
    });
});

Upvotes: 2

Related Questions