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

Question

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

当用户单击A标记时，将根据他们选择的单选按钮选项将他们带到不同的位置。

i.e

无线电分组值=“是”

无线电分组二值=“是”

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

无线电分组值=“是”

无线电分组值=“否”

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

无线电分组值=“否”

无线电分组值=“否”

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

无线电分组值=“否”

无线电分组二值=“是”

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

我想使用jquery来执行这个im，而不是使用jquery的完整基础知识。我想我需要使用IF语句和VARIBLES。

<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

我会按照这些思路做些事情：

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

只需在每个组中检索'Yes‘按钮的checked状态，并对其作出决定。因为您希望在更改所选内容时更改链接的URL，所以可以将函数绑定到所有单选按钮的click事件。

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

Answer 2

...or可以使用数组存储各种可能性：

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

这里的优点是您可以轻松地添加更多的选择。