[ Príspevkov: 6 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 30.09.07
Prihlásený: 28.06.20
Príspevky: 85
Témy: 14 | 14
NapísalOffline : 14.06.2020 20:57 | 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>


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 06.08.20
Príspevky: 1515
Témy: 3 | 3
NapísalOffline : 15.06.2020 16:45 | Radio hide/show div

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")


_________________
Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 30.09.07
Prihlásený: 28.06.20
Príspevky: 85
Témy: 14 | 14
Napísal autor témyOffline : 15.06.2020 23:59 | Radio hide/show div

Ď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.


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 06.08.20
Príspevky: 1515
Témy: 3 | 3
NapísalOffline : 16.06.2020 17:21 | Radio hide/show div

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/


_________________
Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám!
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 01.12.18
Prihlásený: 29.07.20
Príspevky: 169
Témy: 4 | 4
Bydlisko: Aalborg, De...
NapísalOffline : 16.06.2020 17:58 | Radio hide/show div

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..


Offline

Skúsený užívateľ
Skúsený užívateľ
Obrázok užívateľa

Registrovaný: 17.07.11
Prihlásený: 06.08.20
Príspevky: 1515
Témy: 3 | 3
NapísalOffline : 17.06.2020 8:50 | Radio hide/show div

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á.


_________________
Na súkromné správy týkajúce sa problémov, ktoré sa riešia vo fóre, neodpovedám!
 [ Príspevkov: 6 ] 


Radio hide/show div



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

Show/Hide div a SEO

v Internetový marketing, SEO, reklama

0

381

10.08.2011 22:31

jostoga

V tomto fóre nie sú ďalšie neprečítané témy.

select onchange show hide divs

v JavaScript, VBScript, Ajax

2

347

03.08.2010 21:01

Ďuri

V tomto fóre nie sú ďalšie neprečítané témy.

show/hide na vsetky polozky vo forme

v JavaScript, VBScript, Ajax

0

259

09.05.2010 18:12

metalface

V tomto fóre nie sú ďalšie neprečítané témy.

Nieco ako show/hide pre jeden paragraf

v JavaScript, VBScript, Ajax

1

326

18.11.2010 19:30

shaggy

V tomto fóre nie sú ďalšie neprečítané témy.

Ako prinútiť jeden div, aby sa ovládal cez druhý div

v JavaScript, VBScript, Ajax

14

383

22.04.2014 9:45

Mego

V tomto fóre nie sú ďalšie neprečítané témy.

načo slúžia tagy <div id="all"> a <div

v HTML, XHTML, XML, CSS

3

803

06.10.2008 17:50

neutronmind

V tomto fóre nie sú ďalšie neprečítané témy.

Simple Show bots

v Redakčné systémy

11

1666

27.05.2008 18:27

JanoF

V tomto fóre nie sú ďalšie neprečítané témy.

SHOW TITLE v Module

v Redakčné systémy

0

256

05.05.2012 18:33

runyweb

V tomto fóre nie sú ďalšie neprečítané témy.

Show your CARBON cars!

[ Choď na stránku:Choď na stránku: 1, 2 ]

v Počítačové hry

53

3537

20.06.2007 22:18

Spirit

V tomto fóre nie sú ďalšie neprečítané témy.

Hide IP

v Sieťové a internetové programy

9

594

18.08.2010 14:10

riki137

V tomto fóre nie sú ďalšie neprečítané témy.

Hide IP

v Bezpečnosť a firewally

3

869

08.06.2009 11:36

citizen

V tomto fóre nie sú ďalšie neprečítané témy.

jQuery hide

v JavaScript, VBScript, Ajax

11

599

08.11.2009 15:05

lama2d

V tomto fóre nie sú ďalšie neprečítané témy.

Logitech G19 Disco Light show

v Externé zariadenia

0

552

09.04.2010 15:26

popol

V tomto fóre nie sú ďalšie neprečítané témy.

Tuning Speed Show Trenčín 2009

v Akcie, zrazy, festivaly, koncerty

16

1933

30.05.2009 16:11

Thomas4492

V tomto fóre nie sú ďalšie neprečítané témy.

Hide IP Platinum

v Sieťové a internetové programy

3

729

22.10.2013 10:49

Lulu_Zulu

V tomto fóre nie sú ďalšie neprečítané témy.

Hide Post Buttons

v Redakčné systémy

0

446

14.10.2006 15:06

JanoF



© 2005 - 2020 PCforum, edited by JanoF