Ändern Sie einen Link in Abhängigkeit von den ausgewählten Optionen der Optionsschaltflächen mit Jquery

Question

Ich habe ein Formular mit zwei Optionsfeldgruppen. Das Formular hat keine Submit-Schaltfläche, sondern wird mit einer <a href="varible address"> stattdessen.

Wenn der Benutzer auf das A-Tag klickt, wird er an einen anderen Ort weitergeleitet, je nachdem, welche Optionsschaltflächen er ausgewählt hat.

d.h.

radiogroupone Wert ="YES"

radiogrouptwo Wert ="YES"

Ergebnis = <a href="www.addressone.com">Continue</a>

radiogroupone Wert ="YES"

radiogrouptwo Wert ="Nein"

Ergebnis = <a href="www.addresstwo.com">Continue</a>

radiogroupone Wert ="Nein"

radiogrouptwo Wert ="Nein"

Ergebnis = <a href="www.addressthree.com">Continue</a>

radiogroupone Wert ="Nein"

radiogrouptwo Wert ="Ja"

Ergebnis = <a href="www.addressfour.com">Continue</a>

Ich möchte Jquery verwenden, um diese im ganz neu zu etwas anderes als die kompletten Grundlagen mit Jquery durchzuführen. Ich denke, ich muss IF-Anweisungen und VARIBLES verwenden.

<form name="formone" id="optionsform">
<fieldset>
<label><input type="radio" name="group1" id="ac-yes" value="Yes">Yes</label>
<label><input type="radio" name="group1" id="ac-no" value="No">No</label>

<label><input type="radio" name="group2" id="bt-yes" value="Yes">Yes</label>
<label><input type="radio" name="group2" id="bt-no" value="No">No</label>

<a href="varible-address">CONTINUE</a>
</fieldset>
</form>

Answer 1

Ich würde etwas in dieser Richtung vorschlagen:

$('#optionsform input[type="radio"]').click(function() {
    var g1 = $("#ac-yes").is(":checked");
    var g2 = $("#bc-yes").is(":checked");

    var addr = "";
    if (g1) {
        if (g2) addr = "www.addressone.com";
        else    addr = "www.addresstwo.com";
    } else {
        if (g2) addr = "www.addressfour.com";
        else    addr = "www.addressthree.com";
    }
    $("#optionsform a").attr('href', addr);
});

Rufen Sie einfach die checked Status der "Ja"-Schaltflächen in jeder Ihrer Gruppen und entscheiden Sie sich für diese. Da Sie möchten, dass sich die URL Ihres Links ändert, wenn Sie die Auswahl ändern, binden Sie die Funktion an die click Ereignis aller Optionsfelder.

Ein kleiner Tipp ist, dass das Hinzufügen einer Klasse zu allen Ihren Optionsfeldern die #optionsform input[type="radio"] Selektor nur auf .yourclass .

Answer 2

...oder Sie KÖNNEN ein Array verwenden, um die verschiedenen Möglichkeiten zu speichern:

<form name="formone" id="optionsform">
<fieldset>
<label><input type="radio" name="group1" id="ac-yes" value="1">Yes</label>
<label><input type="radio" name="group1" id="ac-no" value="0">No</label>

<label><input type="radio" name="group2" id="bt-yes" value="2">Yes</label>
<label><input type="radio" name="group2" id="bt-no" value="0">No</label>

<a href="varible-address">CONTINUE</a>
</fieldset>
</form>
<script>
    $(function(){
      var urls = new Array();
      urls[0]='http://myurl1/';// no + no
      urls[1]='http://myurl2/';// yes + no
      urls[2]='http://myurl3/';// no + yes
      urls[3]='http://myurl4/';// yes + yes

      $('input[type=radio]').click(fonction(){
        var score = 0;
        $('input[type=radio]:checked').each(function(){score+=parseInt($(this).val())});//was missing ) before the the curly bracket
        $('a').attr('href',urls[score]);
      });//was missing ) and ;
   });
</script>

Der Vorteil dabei ist, dass Sie problemlos weitere Auswahlmöglichkeiten hinzufügen können.