Jquery 从带有变量的单选按钮生成 link

Question

我有一个重要的问题。我想生成一个 hyper link。这是一个例子：

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 个单选框，它们的 ID 分别为：radio1、radio2、radio 3：

$(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);

之前验证 link

Jquery 从带有变量的单选按钮生成 link

Jquery generate link from radio button with variables

javascript

jquery

checkbox

hyperlink

generated