如何使用Javascript根据按钮状态更改Iframe源代码

我正在尝试为网页创建一系列按钮，这些按钮的功能类似于切换按钮（活动/非活动），并根据当前选择的按钮组合更改iframe的源。因此，例如，如果我想让某人看到一个即将上市的产品：

三种颜色（红、绿、蓝）

三种材料类型（金属、塑料、玻璃）

三种尺寸（小、中、大）

我碰巧有一个单独的网页，根据当前的选择（本例中有27种可能的组合），我想显示每个选项，我该怎么做呢？对不起，我对此不是很有经验，但我正在努力学习

//我会像这样设置初始变量吗？
var Red=真；
var蓝=假；
绿色变量=假；
var=true；
var塑料=假；
var玻璃=假；
var小=真；
var-Medium=false；
var大=假；
...
//然后设置每个按钮的初始状态？（抱歉，不确定这是什么样子。）
btnRed.active；
btnMetal.active；
btnSmall.active；
...
//然后做一个条件语句，确保三个类别中的两个变量和两个按钮状态不能同时为真？（同样，很抱歉，不确定此代码的某些部分是什么样子。）
如果（btnRed.active）{
红色=真；
蓝色=假；
绿色=假；
btnBlue.active=false；
btnGreen.active=false；
}else if（btnBlue.active）{
红色=假；
蓝色=真；
绿色=假；
btnRed.active=false；
btnGreen.active=false；
}else if（btnGreen.active）{
红色=假；
蓝色=假；
绿色=真；
btnBlue.active=false；
btnRed.active=false；
}
...
//然后根据变量组合设置iframe源？
如果（红色=真&&Metal=真&&Small=真）{
document.getElementById（'myIframe'）。src=”http://somesite.com";
}
…

我假设您正在使用单选按钮

$('input[type="radio"]').on("change", setIframe);

var setIframe = function() {
  var url;
  //computation of url
  $('iframe').attr("src", url);
}

---

以下是完整的工作代码：

让我们为颜色类型、材质类型等指定代码值。例如，将红色表示为0、绿色表示为1、蓝色表示为2、金属表示为0、塑料表示为1、小尺寸表示为0、中等表示为1等。现在，制作一个包含站点名称的字符串数组。对于红色（0）、塑料（1）、中等（1），请将该站点名称存储在

站点[0][1][1]

。现在，您可以通过

站点[颜色代码][材料代码][尺寸代码]

找到src名称。我建议您试试单选按钮。谢谢Rahul。我感谢你花时间创建一个我可以学习的工作示例。我将实现这个示例，并使用一些自定义CSS使raidio按钮看起来很漂亮。