您如何获取两个单选按钮的输入并将它们作为图像输出？答案

【问题标题】：How do you take two radio button's inputs and output them as an image?您如何获取两个单选按钮的输入并将它们作为图像输出？
【发布时间】：2012-04-30 17:59:34
【问题描述】：

到目前为止，这是我的代码：

http://jsfiddle.net/pRXxT/

我正在努力做到这一点，如果我选择一个单选框，图像将更新为该颜色，但有两个单选框而不是一个。

每个单选框都有一个单独的文件名部分，因此最终结果是：

http://blahblah/images/[radiobox1][radiobox2].jpg

我整天都在玩这个，可以使用一些帮助。由于尝试不同的东西，我的代码有点乱，我留下的代码只能更新 CSS 部分中的第一个图像，所以我不会丢失它。

谢谢

【问题讨论】：

你的代码一团糟。您的 onclick 正在调用一个名为“BODYColour”的函数，但该函数不存在。
我想帮忙，但我对你想要什么感到很困惑。你想将两个收音机选择的颜色组合成一种颜色，然后用 CSS 和 JS 为某些区域着色吗？看起来您正在尝试将图像的来源更改为具有类似“BlackGreen.jpg”的名称。您真的打算为每种颜色选择组合制作图像吗？或者，您更愿意使用 JS 生成的组合颜色吗？此外，正如#Diodeus 所提到的，您在其中有几个函数调用，没有匹配的函数。
血魔知道了。感谢您的帮助
Raymond，如果您希望人们继续帮助您，您需要将@BloodyDemon 的答案标记为正确！

标签： javascript forms radio-button

【解决方案1】：

你的代码有点乱，我花了一点时间才明白你想要什么，你在 jquery 选择器中有一些大错误，所以这里有一些更正，我认为这会起作用：

HTML：

<input type="radio" class="radio1" name="BodyColor" value="blk"/> Black<br/>
<input type="radio" class="radio1" name="BodyColor" value="green"/> Green<br/>
<input type="radio" class="radio1" name="BodyColor" value="yellow"/> Yellow<br/>

<input type="radio" class="radio2" name="InsertColor" value="red"/> Red<br/>
<input type="radio" class="radio2" name="InsertColor" value="green"/> Green<br/>
<input type="radio" class="radio2" name="InsertColor" value="yellow"/> Yellow<br/>

<img src="blkblk.jpg" id="FinalImage" height="100px" width="100px">

JavaScript：

$(document).ready(function() {
    var BodyColor = 'blk';
    var InsertColor = 'blk';

    $(".radio1").click(function() {
        BodyColor = $(this).attr('value');
        updateImage();
    });
    $(".radio2").click(function() {
        InsertColor = $(this).attr('value');
        updateImage();
    });

    function updateImage() 
    { 
        //i don't know the uri you actually want so i'm gonna leave it like it is
        $("#FinalImage").attr('src', BodyColor + InsertColor + ".jpg");
    }

});

编辑刚刚测试过，工作正常

【讨论】：