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

时间:2011-06-26 08:06:02

标签: jquery html radio-button

嘿伙计们我有一个带有两个单选按钮组的表单。表单没有提交按钮,但会改为<a href="varible address">

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

  

radiogroupone value =“YES”

     

radiogrouptwo value =“YES”

     

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

     

radiogroupone value =“YES”

     

radiogrouptwo value =“No”

     

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

     

radiogroupone value =“No”

     

radiogrouptwo value =“No”

     

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

     

radiogroupone value =“No”

     

radiogrouptwo value =“是”

     

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

我想使用jquery执行此操作,除了使用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>

希望你能提前帮助和感谢。 汤姆

2 个答案:

答案 0 :(得分:5)

我会按照以下方式处理:

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

答案 1 :(得分:0)

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

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

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