如果选择单选按钮，则更改图像

Question

我有两个单选按钮，我隐藏了输入标记并用图像替换它们：

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

如果选中单选按钮，我需要换出图像。如果没有，我需要图像保持HTML中的内容。我有这个用于我的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");

    }
});
});

但是我的代码无效。它没有交换图像。我在这做错了什么？任何帮助都很好。谢谢！

我添加了两张关于选择之前单选按钮外观的图片，以及选择一个之后的外观。但我需要把房子图像换成不同的房子图像，里面有颜色。希望这不会让人感到困惑。

Answer 1

将-active网址添加到一个图片时，请将普通网址添加到另一个图片。

$(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;
        }
    });
});