参照所选的单选按钮，如何显示元素？ 使用纯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-qc-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-qc-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-qc-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-qc-200-200-3.jpg" /> </label> </div> <br style="clear:both" /> <div id="selection"> No selection yet </div>