如何显示元素，参考所选单选按钮?使用纯javascript

Question

我试图实现的目标：我正在编写一个代码，它可以从数据库(php&mysql(中提取类别和其他元素
这些元素/节点都在单选按钮的"<label> ... </label>"中
如果用户为单选按钮单击其中一个标签，则标签中的类别名称和img也应在另一个"<div id="selection"> ... </div>"中显示。

工作原理：通过单击单选按钮/标签，我已经可以获取radiobutton值(在我的情况下，该值必须是类别id(。

不起作用：我无法获取此标签中的其他元素并将其显示在其他跨度中

非常重要！：标签中的内容是从数据库中提取的，因此它是动态的

这是我的代码的一个简单版本，没有php元素，但输出应该是一样的

function check() {
var radioBttn = document.querySelectorAll("input[name = 'pet']");
var countRadioBttn = radioBttn.length;
for (i = 0; i < countRadioBttn; i++) {
if (radioBttn[i].checked) {
selection.innerHTML = "You selected a/n " + radioBttn[i].value + ",<br>good choice!";
}
}
}

*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}

<div id="option">
<b>Option Box</b>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:3">
<span>Hamster</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:4">
<span>Mammoth</span>
<img src=""></img>
</label>
</div>
<div id="selection">
No selection yet
</div>

Answer 1

你是这个意思吗？

var rads = document.querySelectorAll("input[name=pet]");
for (var i = 0; i < rads.length; i++) {
rads[i].addEventListener("click", function() {
var parentLabel = this.closest("label");
document.getElementById("selection").innerHTML =
"You selected a/n " + this.value + ",<br>good choice!" +
"<span>" + parentLabel.querySelector("span").innerHTML + "</span>" +
"<img src='" + parentLabel.querySelector("img").src + "'/>";
});
};

*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{ width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
label>img { height:25% }

<div id="option">
<b>Option Box</b>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src="https://lorempixel.com/output/cats-q-c-200-200-5.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-8.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:3">
<span>Rhino</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-1.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:4">
<span>Tiger</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-3.jpg" />
</label>
</div>
<br style="clear:both" />
<div id="selection">
No selection yet
</div>