Javascript 基于多个单选按钮输入使用jquery更新图像

正在基于多个属性渲染图像。
图像的名称反映属性值（用于名称a、b和c）

9
10
11

当用户单击单选按钮（例如b_4）时，选中的输入元素需要更改，并且新图像需要渲染为

<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">  

---

在jQuery中，文件名除了考虑用户输入的值外，还考虑了所有其他选中值，如何实现这一点呢？

在创建一个包含以下内容的数组后，按顺序获取每个选中复选框的

值

：

---

您可以获取每个选中复选框的值，并在输入选中更改时更改img src

演示：

$（“输入[type=radio]”）。打开（“更改”，函数（）{
var index=$（“输入[name=a]：选中”）.val（）+$（“输入[name=b]：选中”）.val（）+$（“输入[name=c]：选中”）.val（）；
$（“#呈现的_选项”）.attr（“src”，index+“_small.jpg”）；
$（“#呈现的_选项”）.attr（“数据缩放图像”，索引+“_big.jpg”）；
})

9
10
11

考虑到需要填充

src

和

数据缩放图像

，应该有一个中间步骤来提取数组作为变量，然后使用它，是吗？是的，我会添加@Jerome.Edited@Jerome，更好吗？简洁且重构。非常满意。没问题@Jerome，总是很乐意帮忙。

<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">  

$("input[type='radio']").on("change", function() {
  const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
  $("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});