Radio hide/show div

Zdravím,

nakoľko neprogramujem, vedeli by ste mi poradiť kód JS, aby to fungovalo podľa tohto môjho primitívneho zápisu.
https://jsfiddle.net/kch13p9r/2/

V kóde potrebujem nadradený DIV displey: none tak mi to nefunguje ako v odkaze. <div class="step4" style="display: none;">

Za každú radu ďakujem.

// Spojený príspevok Ned 14.06.20 21:47

Malá oprava aj radio "A" je skrytý.
https://jsfiddle.net/pqxb59w2/

<div>
<label>1</label>
<input type="radio" name="type" value="1" id="type_1" class="type" />
</div>
<div>
<label>2</label>
<input type="radio" name="type" value="2" id="type_2" class="type" />
</div>
<div>
<label>3</label>
<input type="radio" name="type" value="3" id="type_3" class="type" />
</div>

<div class="step4" style="display: ;">
<div>
<div class="radio_1" style="display: none;">
<label>A</label>
<input type="radio" name="A" value="A" />
<label>B</label>
<input type="radio" name="B" class="radio_1" id="radio_1" value="B" />
</div>
<div class="radio_2" style="display: none;">
<label>C</label>
<input type="radio" name="C" class="radio_2" id="radio_2" value="C" />
<label>D</label>
<input type="radio" name="D" class="radio_2" id="radio_3" value="D" />
</div>
<div class="radio_3" style="display: none;">
<label>E</label>
<input type="radio" name="E" class="radio_3" id="radio_4" value="E" />
<label>F</label>
<input type="radio" name="F" class="radio_3" id="radio_5" value="F" />
<div>
</div>


<script type="text/javascript">
$("#type_1").click(function() {
$(".radio_3").hide();
$(".radio_2").hide();
$(".radio_1").show();
});

$("#type_2").click(function() {
$(".radio_2").show();
$(".radio_3").hide();
$(".radio_1").hide();
});

$("#type_3").click(function() {
$(".radio_2").hide();
$(".radio_3").show();
$(".radio_1").hide();
});
</script>

Ako to má fungovať?
Ak myslíš to, že vieš zapnúť A aj B naraz, tak je to chybným "name" v radio tagoch. Name musí byť pre skupinu radio inputov rovnaký, takže pre A a B si daj pre oba napr. name="AB", pre C a D si daj name="CD" apod. Proste skupina radio inputov, ktoré patria k sebe, musia mať rovnaké name.
Ak chceš mať všetky A,B,C,D,E, aj F prepínateľné v skupine, tak daj rovnaké name všetkým (napr name="subtype")

Ďakujem za upozornenie že nemá radio skupina rovnaké name to bola chyba pri zápise príkladu.

Potrebujem aby to fungovalo nasledovne:
Pri click na radio "1" zobraziť radio "A" a "B" (skryť C,D E,F)
Pri click na radio "2" zobraziť radio "C" a "D" (skryť A,B E,F)
Pri click na radio "3" zobraziť radio "E" a "F" (skryť A,B C,D)

Potreboval by som kód JS, myslím že je to jquery niečo takéto som našiel:

$('.type').on('click', function () {
var radio = $(this).attr('id').split("_");
var radioId = radio[1];
$('.radio_' + radioId).show();
$('.radio').hide();
});



<div>
<label>1</label>
<input type="radio" name="type" value="1" id="type_1" class="type" />
</div>
<div>
<label>2</label>
<input type="radio" name="type" value="2" id="type_2" class="type" />
</div>
<div>
<label>3</label>
<input type="radio" name="type" value="3" id="type_3" class="type" />
</div>

<div class="step4" style="display: none;">
<div>
<div class="radio_1" style="display: none;">
<label>A</label>
<input type="radio" name="A" class="radio_1" id="radio_1" value="A" />
<label>B</label>
<input type="radio" name="A" class="radio_1" id="radio_1" value="B" />
</div>
<div class="radio_2" style="display: none;">
<label>C</label>
<input type="radio" name="B" class="radio_2" id="radio_2" value="C" />
<label>D</label>
<input type="radio" name="B" class="radio_2" id="radio_3" value="D" />
</div>
<div class="radio_3" style="display: none;">
<label>E</label>
<input type="radio" name="C" class="radio_3" id="radio_4" value="E" />
<label>F</label>
<input type="radio" name="C" class="radio_3" id="radio_5" value="F" />
<div>
</div>

<div class="step4" style="display: none;"> Nedovoluje zobrazovať "výsledky" asi by to mala byť podmienka v kóde skriptu aby výsledky zobrazovalo aj pri "step4" style="display: none;".
Za každú radu ďakujem.

V rámci osvety odpoviem trochu inak - kašli na zastaralé jQuery a skús napr Vue.js. Pozri aké je to tam jednoduché
https://jsfiddle.net/aL10gsrz/1/

suhlasim, ze s jQuery by som sa dnes uz nezaoberal ale kazdy jeden frontend developer by mal vediet ako efektivne manipulovat DOM cez vanilla javascript. framework zacne riesit nieco o com clovek nema ani predstavu, ze predstavuje problem..

Všeobecne sú dve cesty, ako sa stať dobrým programátorom: top-down (od frameworkov postupne zisťovať, ako čo funguje), alebo bottom-up (od základov, ako čo funguje, prejsť na jednoduchšie frameworky). Obe cesty sú správne a každému vyhovuje iná.