根据使用 jquery 选择的单选按钮选项更改链接答案

【问题标题】：Change an link depending on the radio button options selected using jquery根据使用 jquery 选择的单选按钮选项更改链接
【发布时间】：2020-12-18 03:19:14
【问题描述】：

我有一个包含两个单选按钮组的表单。该表单没有提交按钮，而是有一个<a href="varible address">。

当用户点击 A 标签时，它会将他们带到不同的位置，具体取决于他们选择的单选按钮选项。

即

radiogroupone 值 =“是”

radiogrouptwo 值 =“是”

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

radiogroupone 值 =“是”

radiogrouptwo 值 =“否”

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

radiogroupone 值 =“否”

radiogrouptwo 值 =“否”

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

radiogroupone 值 =“否”

radiogrouptwo 值 =“是”

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

我想使用 jquery 来执行此操作，这对于使用 jquery 的完整基础之外的任何内容都是全新的。我想我需要使用 IF 语句和变量。

<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>

【问题讨论】：

标签： jquery html radio-button

【解决方案1】：

我会按照这些思路去做：

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

只需检索每个组中“是”按钮的checked 状态并做出决定。由于您希望在更改选择时更改链接的 URL，因此将该函数绑定到所有单选按钮的 click 事件。

一个小提示是，为所有单选按钮添加一个类会将#optionsform input[type="radio"] 选择器简化为.yourclass。

【讨论】：

继续从父 ID 下降不是最好吗？这是一个原生的 javascript 方法，所以它应该更快。

【解决方案2】：

...或者您可以使用数组来存储各种可能性：

<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>

这里的好处是您可以轻松添加更多选择。

【讨论】：