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

Question

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

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

即

radiogroupone value ="YES"

radiogrouptwo value ="YES"

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

radiogroupone value ="YES"

radiogrouptwo value ="No"

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

radiogroupone value ="No"

radiogrouptwo value ="No"

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

radiogroupone value ="No"

radiogrouptwo value ="Yes"

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

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);
});

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

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