从 2 组单选按钮获取 url

Question

我正在尝试根据两组单选按钮查找 url，我的 html 如下所示：

<form>
  <fieldset>
    <label><input type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input type="radio" name="skin" id="fair" value="Fair">Fair</label>
    <label><input type="radio" name="skin" id="medium" value="Medium">Medium</label>
    <label><input type="radio" name="skin" id="tan" value="Tan">Tan</label>
    <label><input type="radio" name="skin" id="dark" value="Dark">Dark</label>
  </fieldset>
</form>

<a href="url from script">CONTINUE</a>

我知道我在这里必须使用 javascript 才能获得正确的 url。

我想它必须像这样构建：

if comp = "pink" then
  switch(skin)
  {
    case Fair:
      url = www.pinkfair.com;
      break;
    case Medium:
      url = www.pinkmedium.com;
      break;
    case Tan:
      url = www.pinktan.com;
      break;
    case Dark:
      url = www.pinkdark.com;
      break;
    }
else
  switch(skin)
  {
    case Fair:
      url = www.blackfair.com;
      break;
    case Medium:
      url = www.blackmedium.com;
      break;
    case Tan:
      url = www.blacktan.com;
      break;
    case Dark:
      url = www.blackdark.com;
      break;
    }

但是正如你所看到的，我是一个 javascript 新手，有没有人可以帮助我微调代码。

提前致谢。

/让

Answer 1

一种解决方案是向这样的单选按钮添加特定的类（您也可以按名称使用选择器，我个人觉得选择类更容易）：

<form>
  <fieldset>
    <label><input class="first" type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input class="first" type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input class="second" type="radio" name="skin" id="fair" value="Fair">Fair</label>
    <label><input class="second" type="radio" name="skin" id="medium" value="Medium">Medium</label>
    <label><input class="second" type="radio" name="skin" id="tan" value="Tan">Tan</label>
    <label><input class="second" type="radio" name="skin" id="dark" value="Dark">Dark</label>
  </fieldset>
</form>

<a class="resultLink" href="url from script">CONTINUE</a>

...既然您已经将输出 url 的一部分保留为值/id，请让 jQuery 处理其余部分...

$('.first, .second').change(function() {
    var firstPart = $('.first:checked').val();
    var secondPart = $('.second:checked').val();
    var url = 'www.' + firstPart + secondPart + '.com';

    $('.resultLink').attr('href', url);
})

对于更复杂的场景，请使用 Sajad Deyargaroo 提供的解决方案。

Answer 2

由于我们必须根据从两个单选按钮组中选择的单选按钮获取 url，因此您编写的逻辑实际上可以正常工作。我在 JavaScript/JQuery 中编写了相同的内容，如下所示。

但在此之前，我想向您展示一个简单的解决方案，将 url 属性添加到单选按钮，这将减少一点代码。

这是有效的（经过测试的）解决方案。

HTML

<form>
  <fieldset>
    <label><input type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input type="radio" name="skin" id="fair" value="Fair" data-pinkurl="www.pinkfair.com" data-blackurl="www.blackfair.com" >Fair</label>
    <label><input type="radio" name="skin" id="medium" value="Medium" data-pinkurl="www.pinkmedium.com" data-blackurl="www.blackmedium.com">Medium</label>
    <label><input type="radio" name="skin" id="tan" value="Tan" data-pinkurl="www.pinktan.com" data-blackurl="www.blacktan.com">Tan</label>
    <label><input type="radio" name="skin" id="dark" value="Dark" data-pinkurl="www.pinkdark.com" data-blackurl="www.blackdark.com">Dark</label>
  </fieldset>
</form>

脚本

var comp = $("input[type='radio'][name='comp']:checked").val();
var url = '';

if (comp == "Pink"){
   url = $("input[type='radio'][name='skin']:checked").attr("data-pinkurl");
}
else{
   url = $("input[type='radio'][name='skin']:checked").attr("data-blackurl");
}

另外，如上所述，下面是您更新的代码，它也可以正常工作。

var comp = $("input[type='radio'][name='comp']:checked").val();
var skin = $("input[type='radio'][name='skin']:checked").val();
var url = '';

if (comp == "Pink"){
  switch(skin)
  {
    case "Fair":
      url = "www.pinkfair.com";
      break;
    case "Medium":
      url = "www.pinkmedium.com";
      break;
    case "Tan":
      url = "www.pinktan.com";
      break;
    case "Dark":
      url = "www.pinkdark.com";
      break;
    }
}
else{
  switch(skin)
  {
    case "Fair":
      url = "www.blackfair.com";
      break;
    case "Medium":
      url = "www.blackmedium.com";
      break;
    case "Tan":
      url = "www.blacktan.com";
      break;
    case "Dark":
      url = "www.blackdark.com";
      break;
    }
}

最后，如果你不想使用 jQuery 并且想要一个纯 JavaScript 的解决方案，那么你需要检查每个单选按钮，看看它是否被选中。

if (document.getElementById('pink').checked) {
  comp = document.getElementById('pink').value;
}