[jQuery] Div laten zien a.d.h.v invoer meerdere radiobuttons

Hola!

Ik heb een script geschreven in jQuery dat aan de hand van de keuze van 2 radio buttons een bepaalde div moet laten zien. Mijn jQuery skillz zijn niet zo heel erg goed en naar mijn mening klopt het script zo. Het enige is dat de werking ervan gewoonweg 0 is.

Heeft iemand enige idee waar dit aan kan liggen? De oplossing zal ongetwijfeld voor de hand liggen maar ik ben er inmiddels al zo lang mee bezig dat ik er wellicht overheen kijk.

Hier kun je een voorbeeldje bekijken.

Mijn HTML:
HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<form>     0<input type="radio" value="0" name="test" id="test1" />     1<input type="radio" value="1" name="test" id="test1" />     </form>          <form>     0<input type="radio" value="0" name="test" id="test2" />     1<input type="radio" value="1" name="test" id="test2" />     </form>          <div id="11" class="hide">     1 - 0     </div>          <div id="10" class="hide">     0 - 1     </div>     <div id="01" class="hide">     1 - 1     </div>         <div id="00" class="hide">     0 - 0     </div>

Mijn jQuery:
JavaScript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

$(document).ready(function(){     $("input[name$='#test1']").click(function(){     var radio_value = $("#test1").val();       $("input[name$='#test2']").click(function(){           var radio2_value = $("#test2").val();     if(radio_value=='1' || radio_value2=="1") {     $("#11").show();      $("#10").hide();      $("#01").hide();      $("#00").hide();         }   else if(radio_value=='0' || radio2_value=="1") {     $("#11").hide();      $("#10").hide();      $("#01").show();      $("#00").hide();   }   else if(radio_value=='1' || radio2_value=="0") {     $("#11").hide();      $("#10").show();      $("#01").hide();      $("#00").hide();    }          else if(radio_value=='0' || radio2_value=="0") {     $("#11").hide();      $("#10").hide();      $("#01").hide();      $("#00").show();    }         });   }); });

Mijn CSS:
Cascading Stylesheet:

1 2 3

.hide{     display: none; }

Alvast bedankt!

Als de werking 0 is zal het script ook wel niet goed zijn he ;-). Ik hoop trouwens dat dit een versimpeld voorbeeld van je echte code is, want het ziet er niet heel lekker uit nu.

Enfin, je hebt 3 problemen

1) Je hebt het click event aan niet bestaande elementen gehangen (namelijk de elementen waarvan de name eindigt op #test1 en #test2). Dit click event wordt dus nooit uitgevoerd.
2) Je vraagt vervolgens de waarde op van een element met id die ambigue is (je hebt namelijk 2x de id's test1 en test2 gedefinieerd). Als je click event al zou werken, krijg je hier dus altijd de waarde terug van het eerste element met die id, niet per se dus het element dat je hebt aangeklikt.
3) Je hebt 2 click events in elkaar genest. Volgens mij werkt dit niet zoals je wil.

oke helder

@Keeper heb inmiddels mijn code aangepast om een 1 van 3 problemen op te lossen:
HTML:

1 2 3 4 5 6 7 8 9

<form>     0<input type="radio" value="0" name="test1" />     1<input type="radio" value="1" name="test1" />     </form>          <form>     0<input type="radio" value="0" name="test2" />     1<input type="radio" value="1" name="test2" />     </form>

Ik heb de NAME veranderd naar de juiste waarde. In principe is ID voor de inputs in dit geval niet nodig omdat het script de VALUE van de input's opvraagt (een 0 of een 1 dus).

Zoals ik al aangaf ben ik een beginneling als het om jQuery gaat. Naar mijn idee doet onderstaande stukje code het volgende:

Na het klikken op een radio vraagt hij de waarde van #test1 op en vervolgens die van #test2... in de rest van de code worden deze waardes verwerkt waarna een .show en .hide op bepaalde div's worden getriggerd.
JavaScript:

1 2 3 4

$("input[name$='#test1']").click(function(){      var radio_value = $("#test1").val();        $("input[name$='#test2']").click(function(){            var radio2_value = $("#test2").val();

Uit jouw verhaal begrijp ik dat ik dat verkeerd zie en ik blijkbaar een syntax fout heb gemaakt. Heb je een suggestie hoe ik dit stukje code wel kan laten doen wat ik hierboven heb beschreven?

Alvast bedankt voor je hulp zover!

JavaScript:

1	$("input[name$='#test1']")

Dit betekent: selecteer het input-element waarbij de waarde van het name-attribuut eindigt op #test1. Die bestaat niet (en kan ook niet bestaan, want de waarde van name mag geen # bevatten).

quote:

IvarioD schreef op zondag 29 juli 2012 @ 03:31:
Heb je een suggestie hoe ik dit stukje code wel kan laten doen wat ik hierboven heb beschreven?

http://api.jquery.com/category/selectors/
debuggen

Oke ik heb hem nu gedeeltelijk werkend, hij checkt nu alleen de waarde van de eerste radio button, wat klopt aangezien ik dit heb staan:
JavaScript:

1 2 3 4

$("input[name$='test1']").click(function(){     var radio_value = $(this).val();   var radio_value2 = $(this).val();

Als iemand mij kan vertellen hoe ik kan zorgen dat het .click event geldt voor test1 en test2 en ik test1 kan binden aan var radio_value en test2 aan var radio_value2 ben ik erg tevreden!
JavaScript:

1 2 3 4 5

$("input[name$='test1']").click(function(){ //deze wil ik combineren met de onderstaande $   $("input[name$='test2']").click(function(){ //deze wil ik combineren met de bovenstaande $   var radio_value = $(this).val(); //dit moet gelinkt aan test1   var radio_value2 = $(this).val(); //dit moet gelinkt aan test2

Online voorbeeldje vind je hier

Thanks alvast!

IvarioD wijzigde deze reactie 29-07-2012 04:59 (4%)

quote:

IvarioD schreef op zondag 29 juli 2012 @ 04:58:
Als iemand mij kan vertellen hoe ik kan zorgen dat het .click event geldt voor test1 en test2

Het antwoord daarop vind je op de eerste link in mijn vorige post. Maar in plaats van te selecteren op basis van een (deel van) het name-attribuut, is een generieke class toewijzen en selecteren (of simpelweg elk radio-element) een stuk gemakkelijker. Daarna zal $(this).val() de juiste waarde geven.

Begrijp niet goed waarom het zo moeilijk moet. Het kan toch een pak simpeler (als ik het goed begrijp):

http://jsfiddle.net/BramVanroy/ZW3WL/
JavaScript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(document).ready(function() {     var resultP = $("#result p");          $("input[name='row-1']").click(function() {         var result1 = $("#result #row-1-result");                  resultP.hide();         result1.text($(this).val());         resultP.fadeIn("fast");     });          $("input[name='row-2']").click(function() {         var result2 = $("#result #row-2-result");                  resultP.hide();         result2.text($(this).val());         resultP.fadeIn("fast");     }); });

Dit lijkt me het meest straight forward.

BramVroy wijzigde deze reactie 29-07-2012 12:16 (59%)

@Bram, wat als er meer in die box gerendert moet worden als een score?

Ik zou gewoon een click event hangen aan alle radiobuttons, en in dat event de state van de buttons uitlezen en de visibility state van de div toggelen.

Zoiets:
http://jsfiddle.net/Nxqxe/

Grijze Vos wijzigde deze reactie 29-07-2012 12:51 (14%)

quote:

Grijze Vos schreef op zondag 29 juli 2012 @ 12:31:
@Bram, wat als er meer in die box gerendert moet worden als een score?

Ik zou gewoon een click event hangen aan alle radiobuttons, en in dat event de state van de buttons uitlezen en de visibility state van de div toggelen.

Zoiets:
http://jsfiddle.net/Nxqxe/

Inderdaad; maak het data-driven. Grijze Vos was me voor, maar deze fiddle is een mooie oplossing die gebruik maakt van jQuery's ingebouwde mogelijkheid om form data te serializeren. Deze werkt gelijk voor de 'general case' waar je meer dan twee items hebt en werkt netjes via het form submit event voor betere ondersteuning van zaken als automated form entry.

offtopic:
Wat fijn trouwens dat jsFiddle tegenwoordig Firefox crasht zodra je Firebug actief hebt. Benieuwd wat ze daar aan het doen zijn...

thanks a lot voor de reacties allemaal! @R4gnax inderdaad, works like a charm! Ik ga deze toepassen en uitbreiden. Het feit dat ik niet de meest efficiente oplossing heb gekozen is waarschijnlijk omdat ik nu voor de tweede dag weet wat jquery precies is.

Thanks anyway!

quote:

R4gnax schreef op zondag 29 juli 2012 @ 13:27:
[...]
Inderdaad; maak het data-driven. Grijze Vos was me voor, maar deze fiddle is een mooie oplossing die gebruik maakt van jQuery's ingebouwde mogelijkheid om form data te serializeren. Deze werkt gelijk voor de 'general case' waar je meer dan twee items hebt en werkt netjes via het form submit event voor betere ondersteuning van zaken als automated form entry.

Dan zou ik nog steeds de result divs data attributen geven om op te matchen, i.p.v. een of ander ID

quote:

Grijze Vos schreef op zondag 29 juli 2012 @ 14:52:
[...]

Dan zou ik nog steeds de result divs data attributen geven om op te matchen, i.p.v. een of ander ID

Er is wel wat voor te zeggen. Wanneer je code schrijft voor componenten die ook in andere omgevingen moet draaien dan die ene enkele pagina waarvoor je de functionaliteit nodig hebt, dan zijn data attributen zeker iets meer gevrijwaard van collisies dan dat element IDs dat zijn.

Vanwege de overhead geassocieerd met selectors op meerdere attributen zou ik dan alleen nog steeds een implementatie met één composed identifier houden en i.p.v. het id attribute slechts één (composed) data attribute gebruiken.

Gesproken over overhead: ID selectors worden direct op document.getElementById gemapped door jQuery, en zijn daardoor een stuk sneller. Dat kan in grote DOMs met veel mutaties nog wel eens wat winst opleveren.

quote:

R4gnax schreef op zondag 29 juli 2012 @ 17:11:
[...]

Gesproken over overhead: ID selectors worden direct op document.getElementById gemapped door jQuery, en zijn daardoor een stuk sneller. Dat kan in grote DOMs met veel mutaties nog wel eens wat winst opleveren.

Ik denk niet dat de gebruiker in dit geval frantically (> 30x per sec) gaat klikken op die radiobuttons.

btw, ga es vakantie vieren jij.

Grijze Vos wijzigde deze reactie 30-07-2012 08:49 (5%)

Heb toch mijn bedenkingen bij de x resultaat divs die jullie gebruiken. Als je nu een twintigtal radio's hebt, dan zit je ook nog eens met twintig result divs? Waarom dan niet zo: http://jsfiddle.net/BramVanroy/Nxqxe/1/

Ik wou dat ik meer van het gebruik van i en ii wist icm each. Denk dat je het daarmee heel kort kan schrijven. Heb het even hier nagevraagd: http://stackoverflow.com/...e-for-x/11718428#11718428

Zal jullie hier up-to-date houden. Tenzij jullie ervan overtuigd zijn dat wat ik doe (/wil bereiken) niet nodig is of gewoon over-the-top.

Ik kwam toevallig laatst op Twitter dit tegen: https://github.com/OliverJAsh/FormAccordion
Weet niet of dat nog nuttig/relevant is, of dat dat alleen voor input types is, maar zo te zien kan je daar ook wat regels/condities aangeven aan 'form rows', wat gewoon divjes zijn binnen het form.

Dit is het eindresultaat: http://jsfiddle.net/BramVanroy/Nxqxe/5/

Ik hoop dat je dit bedoelt

quote:

BramVroy schreef op maandag 30 juli 2012 @ 12:25:
Dit is het eindresultaat: http://jsfiddle.net/BramVanroy/Nxqxe/5/

Doe hem dan zo http://jsfiddle.net/ezDBV/1/

Ben je meteen die trailing '-' kwijt.

quote:

Keeper schreef op maandag 30 juli 2012 @ 12:57:
[...]

Doe hem dan zo http://jsfiddle.net/ezDBV/1/

Ben je meteen die trailing '-' kwijt.

Die kreeg ik niet weg. Kan je even uitleggen wat die values var is? (Maw wat doet []) En wat die join doet?

"[]" defineerd een Array, en de join maakt er weer een string van.

Oftewel:
code:

var values = []
values[0] = 0
values[1] = 1
values[2] = 3

var str = values.join(' - ')
str is nu "0 - 1 - 3"

code niet als werkend bedoeld, maar als uitleg.

GateKeaper wijzigde deze reactie 30-07-2012 13:26 (62%)

quote:

BramVroy schreef op maandag 30 juli 2012 @ 13:11:
Die kreeg ik niet weg. Kan je even uitleggen wat die values var is? (Maw wat doet []) En wat die join doet?

Zie idd bovenstaande antwoord +

https://developer.mozilla...ence/Global_Objects/Array
https://developer.mozilla...Global_Objects/Array/push
https://developer.mozilla...Global_Objects/Array/join

Aha, dat is duidelijk. Bedankt!