JQuery генерирует ссылку с переключателем с переменными

Question

У меня возник важный вопрос. Я хочу создать гипер ссылку. вот пример:

Radio group one: 
[X] Black 
[ ] White 
Radio group two: 
[ ] Black 
[X] White 
[ ] Yellow 
Radio group three: 
[ ] Black 
[ ] White 
[X] Red 

Это будет результат:

<a href="www.example.de/example/BLACK-SITE/WHITE-SITE/RED-SITE">My generated Link</a> 

Я надеюсь, вы понимаете, что я имею в виду :) было бы здорово, чтобы получить какие-либо идеи, как это исправить. Спасибо С уважением, Николь :)

Вот мой код до сих пор:

 <script> 

    $(document).ready(function(){ 



    $('#back1').change(function(){ 
     if(this.checked) 
      $('#backimg1').show(); 
      $('#backimg2').hide(); 
      var back = '/schwarz-17'; 

    }); 

    $('#back2').change(function(){ 
     if(this.checked) 
      $('#backimg1').hide(); 
      $('#backimg2').show(); 
      var back = '/weiss-18'; 

    });  



    $('#front1').change(function(){ 
     if(this.checked) 
      $('#frontimg1').show(); 
      $('#frontimg2').hide(); 
      $('#frontimg3').hide(); 
      var back = '/teil-21'; 

    }); 

    $('#front2').change(function(){ 
     if(this.checked) 
      $('#frontimg1').hide(); 
      $('#frontimg2').show(); 
      $('#frontimg3').hide(); 
      var back = '/halb-23'; 

    }); 

    $('#front3').change(function(){ 
     if(this.checked) 
      $('#frontimg1').hide(); 
      $('#frontimg2').hide(); 
      $('#frontimg3').show(); 
      var back = '/ganz-26'; 
    }); 
}); 



<a id="link" onclick="location.href=this.href+'?key='+back+front;return false;" href ="http://www.tronitechnik.de/duschen"> 

Answer 1

Если у вас есть 3 радио коробки с respectives идентификаторов: FM1,, Radio2, radio3:

$(document).ready(function(){ 

var link1 = "default1" ; 
var link2 = "default2" ; 
var link3 = "default3" 
var baseLink = "www.example.de/example/" ; 
var finalLink ; 

$('#radio1').on('change', function() { 
    link1 = $(this).val(); 
    changeLink(); 
}); 

$('#radio2').on('change', function() { 
    link2 = $(this).val(); 
    changeLink(); 
}); 

$('#radio3').on('change', function() { 
    link3 = $(this).val(); 
    changeLink(); 
}); 

function changeLink(){ 
    finalLink = baseLink + link1 + "/" + link2 + "/" + link3 ; 
    $("#link").attr("href",finalLink); 
} 

} 

I советуем вам проверить ссылку, прежде чем делать $("#link").attr("href",finalLink);