使用来自数据库的选中值显示/隐藏基于单选按钮的 Div

Question

how to Show/Hide Divs based on Radio Buttons with checked values coming from a database i am using php and sql

<input type="radio" name="status" value="Ongoing" checked="checked">Ongoing<br>
<input type="radio" name="status" value="Comming">Comming<br>
<input type="radio" name="status" value="End">End<br>

<div>div for ongoing</div>
<div>div for Comming</div>
<div>div for End</div>

Answer 1

The following could be helpful to solve your issue (please note the usage of data-* attribute in the div element):

 var radio = document.querySelectorAll('[name=status]'); radio.forEach(r => r.addEventListener('click', function(){ var v = this.value; document.querySelectorAll('div').forEach(d => { if (d.getAttribute('data-value') == v){ d.style.display = 'block'; } else{ d.style.display = 'none'; } }); }));

 [data-value = "Comming"],[data-value = "End"]{ display: none; }

 <input type="radio" name="status" value="Ongoing" checked="checked">Ongoing<br> <input type="radio" name="status" value="Comming">Comming<br> <input type="radio" name="status" value="End">End<br> <div data-value="Ongoing">div for ongoing</div> <div data-value="Comming">div for Comming</div> <div data-value="End">div for End</div>