Изменить ссылку в зависимости от параметров переключателя, выбранных с помощью jquery

Question

Эй, ребята, у меня есть форма с двумя группами переключателей. Форма не имеет кнопки отправки, но вместо нее будет <a href="varible address">.

Когда пользователи щелкают тег A, они переводят их в другое место в зависимости от выбранных опций переключателей.

т.е.

значение радиогруппы = "ДА"

radiogrouptwo value = "YES"

Результат = <a href="www.addressone.com">Continue</a>

значение радиогруппы = "ДА"

radiogrouptwo value = "No"

Результат = <a href="www.addresstwo.com">Continue</a>

значение радиогруппы = "Нет"

radiogrouptwo value = "No"

Результат = <a href="www.addressthree.com">Continue</a>

значение радиогруппы = "Нет"

radiogrouptwo value = "Yes"

Результат = <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>

Надеюсь, вы сможете помочь и заранее спасибо. Том

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

Просто извлеките состояние checked кнопок «Да» в каждой из ваших групп и примите решение об этом.Поскольку вы хотите, чтобы URL-адрес вашей ссылки изменялся при каждом изменении выбора, вы привязываете функцию к событию click всех переключателей.

Небольшой совет - добавление класса ко всем вашим радиокнопки упростили бы селектор #optionsform input[type="radio"] до .yourclass.

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

Преимущество здесь в том, что вы можете легко добавить больше вариантов.