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

如果你有respectives ID的3個單選框：收音機1，第二廣播電臺，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); 
} 

} 

我建議您在做之前驗證鏈接$("#link").attr("href",finalLink);