Zdravím,

vedeli by ste mi poradiť, ako zapísať JS.
Nakoľko neprogramujem urobil som to len cez taký primitívny zápis v JS.
https://jsfiddle.net/kch13p9r/

Ďakujem

ved to funguje ci? kde je problem?

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.

ano tak ako pipisujes mi to v tom jsfiddleri funguje

Áno funguje, lebo som vyhodil z <div class="step4" style="display: none;">
Tu je kompletný kód s "display: none"
https://jsfiddle.net/2Lbaor7g/1/
Nakoľko neprogramujem zapísal som JS len primitívne.
Potreboval by som poradiť s JS, ktorý by zisťoval hodnoty radio a podľa toho zobrazil, alebo skryl dav.

neviem ci som pochopil ale skus https://jsfiddle.net/q9tvwx67/. ked nastavis display: none rodicovskemu divovi, tak jeho deti nezobrazis nech im nastavis cokolvek. okrem toho si tam mal trochu bordel v tych divoch, zle pouzatvarane, odsadzuj si to a vyznas sa v otm lepsie.

Super, ďakujem. Skúšal som aj step4 - show, ale nie pre jednotlivé radio div-y, preto sa mi pri prvom spustení zobrazovali všetky výsledky až pri ďalšom kliku selektovalo výsledky radio.

//autoeditácia príspevku (28 Jún 2020, 13:07)
Skúšal som to aj pomocou jquery, ale neskrýva mi zvyšné 2 div-y, ktoré nie sú vo výbere.

https://jsfiddle.net/783nf95y/

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

<div class="step4" style="display: none;">
<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_2" value="B" />
</div>
<div class="radio_2" style="display: none;">
<label>C</label>
<input type="radio" name="B" class="radio_2" id="radio_3" value="C" />
<label>D</label>
<input type="radio" name="B" class="radio_2" id="radio_4" value="D" />
</div>
<div class="radio_3" style="display: none;">
<label>E</label>
<input type="radio" name="C" class="radio_3" id="radio_5" value="E" />
<label>F</label>
<input type="radio" name="C" class="radio_3" id="radio_6" value="F" />
</div>
</div>


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


Vie mi niekto poradiť kde mám chybu?

v kode nemas ziadny element s triedou "radio", takze tento riadok nic neurobi.

hint: element moze mat aj viac tried.

Skúšam rôzne možnosti $('.radio_').hide(); nič nefunguje.
Ako by som takúto podmienku skrývania ostatných div zakomponoval.

a ake moznosti si skusal?

Nakoľko neprogramujem a snažím sa vyhľadať a naštudovať veci na nete, tak tých možností pokus omyl som už urobil neúrekom.
Pozeral som možnosť hide/show pomocou if-else.
Pozeral som funkciu document.getElementById(id);

Chcel by som urobiť na webe formulár, kde sa budú otvárať/skrývať div podľa výberu klik radio.

Spoločná trieda "class" na radio A,B,C,D,E,F nastaviť na hide.
Jedinečné "id" na radio nastaviť na show.

no hovorim, chyba vznika v tom riadku, co si vyznacil. schovavas vsetky elementy, ktore maju triedu "radio". a maju nejake elementy triedu "radio"? hint: nie. mas tam iba triedy "radio_1", "radio_2" .. cize nebolo by im mozne priradit este tu jednu obecnu triedu "radio"? ze by mali aj "radio" a aj "radio_1"? nestacilo by teda upravit HTML kod a pridat im to?

Podarilo sa mi to takýmto spôsobom pridať id do div.
Skúšal som rovnakú triedu pre všetky div class="test" pridať do JS skryť $('.test').hide(); ale potom sa nezobrazovali žiadne možnosti.
Ďakujem veľmi za ochotu ak existuje niečo jednoduchšie budem rád za každú radu.
Ešte to vyskúšam cez tie dve triedy.

https://jsfiddle.net/2Law4zbh/

<div>
<label>1</label>
<input type="radio" name="type" value="1" id="test_1" class="type" />
</div>
<div>
<label>2</label>
<input type="radio" name="type" value="2" id="test_2" class="type" />
</div>
<div>
<label>3</label>
<input type="radio" name="type" value="3" id="test_3" class="type" />
</div>

<div class="step4" style="display: none;">
<div class="test" id="radio_1" style="display: none;">
<label>A</label>
<input type="radio" name="A" class="aaa" id="radio_1" value="A" />
<label>B</label>
<input type="radio" name="A" class="aaa" id="ra1" value="B" />
</div>
<div class="test" id="radio_2" style="display: none;">
<label>C</label>
<input type="radio" name="B" class="aaa" id="ra3" value="C" />
<label>D</label>
<input type="radio" name="B" class="aaa" id="ra4" value="D" />
</div>
<div class="test" id="radio_3" style="display: none;">
<label>E</label>
<input type="radio" name="C" class="aaa" id="ra1" value="E" />
<label>F</label>
<input type="radio" name="C" class="aaa" id="ra6" value="F" />
</div>
</div>

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

//autoeditácia príspevku (28 Jún 2020, 17:11)
S dvomi triedami mi to nefunguje.
https://jsfiddle.net/a5jsh2nk/

v pohode, ak to funguje, je to cajk.

mal by si sa najprv zamerat na zaklad - html, javascript, DOM - predtym, nez sa vrhnes na taketo srandy s jquery