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

【问题标题】：Change image if radio button is selected如果选择单选按钮，则更改图像
【发布时间】：2023-03-14 17:28:01
【问题描述】：

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

<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");

    }
});
});

但我的代码不起作用。它不会换出图像。我在这里做错了什么？任何帮助都是好的。谢谢！

我添加了两张图片，说明单选按钮在选择之前的外观以及在选择一个之后的外观。但我需要将该房屋图像换成带有颜色的不同房屋图像。希望这不会太混乱。

【问题讨论】：

当用户选择另一个单选按钮时，您没有将图像设置为非活动版本。
什么是input[name=user-type]？和input[name=ps-qna-1]有什么关系？
对不起，我刚刚看到了。我将其更改为 input[name=ps-qna-1] 我也在我的代码中更改了它。实际上我发现了另一个错误。我的 .val() == "HomeOwner" 无论如何我把它改成了 "Homeowner" （小写 o），这样做之后，我的代码现在可以工作了，但我无法将它恢复到非活动图像（原始HTML 图像）当您选择另一个单选按钮时。帮助？ @Barmar
将-active URL 设置为一张图片时，将非活动URL 设置为另一张图片。
非常感谢！有效！我很感激！ :) @Barmar

标签： jquery html radio-button

【解决方案1】：

当您将-active URL 添加到一个图像时，将正常 URL 添加到另一个。

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

【讨论】：