<input name="sel" value="one" type="radio">one
<input name="sel" value="two" type="radio">two
<input name="sel" value="three" type="radio">three
<div id='one' class="one someClass deactive">блок с one</div>
<div id='two' class="two someClass deactive">блок с two</div>
<div id='three' class="three someClass deactive">блок с three</div>
<!-- нужно показать вот эти блоки -->
<div class="one someClass deactive">блок с one1</div>
<div class="two someClass deactive">блок с two1</div>
<div class="three someClass deactive">блок с three1</div>
<!-- + -->
<div class="one someClass deactive">блок с one2</div>
<div class="two someClass deactive">блок с two2</div>
<div class="three someClass deactive">блок с three3</div>
.deactive {
display: none;
}
document.querySelectorAll('[name=sel]').forEach(s => {
s.addEventListener('change', function() {
document.querySelectorAll('.someClass').forEach(d => d.classList.add('deactive'));
document.querySelector(`.${this.value}`).classList.remove('deactive');
// document.querySelectorAll(this.value).classList.remove('deactive');
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.