參照所選的單選按鈕，如何顯示元素？ 使用純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>