jquery - 单选按钮 - 如何检查链接并将用户发送到 URL

Question

我试图找到基于单选按钮选择检查 url 的最佳方法。在我的页面上，我至少有 5 对单选按钮。有人可以告诉我根据他们选择的单选按钮将用户发送到正确网址的最佳方式是什么吗？

$(document).ready(function () {
    $("*[type=radio]").change(function () {
       alert( $(this).attr("value"))
    })
});

查看更多代码：jsfiddle

Answer 1

根据您的 jsfiddle，您的单选按钮对按顺序命名：第一对为 named 1，第二对为 named 2，依此类推。您可以使用它为循环中的按钮分配侦听器。首先，给每个按钮一个与单选按钮组名称匹配的 id，以及一个将它们标识为组的类，如下所示：

<div>
    <ul>
        <li>
            <input type="radio" name="1" value="http://www.google.com" checked="checked" id="radio-1">
            <label for="radio-1"><strong>link 1</strong></label>
        </li>
        <li>
            <input type="radio" name="1" value="http://www.bing.com" id="radio-2">
            <label for="radio-2"><strong>link 2</strong></label>
        </li>
    </ul>
</div>
<p>
    <button id='button_1' href="#" class="radio-redirect btn btn-primary">GO !</button>
</p>

所以你最终会得到一堆这样的按钮。然后你需要遍历它们并给它们一个监听器：

$.each($('.radio-redirect'), function(i, item) {
    var id = $(item).prop('id');
    var idparts = id.split('_'); // idparts[1] is now the number portion of the id
    $(item).click(function() {
        location.href=$('input[name='+idparts[1]+']:checked').val();
    });
});

这是一个 jsfiddle，我location.href用调用替换了赋值alert，这样包含执行代码的框架就不会消失。只要您符合您的命名标准，这将起作用。如果您将单选按钮名称更改为，radiobutton_1而不是简单地说1，您只需修改该location.href行以包含全名。

如果您的命名不一致，则必须手动将click事件分配给每个按钮，而不是能够循环执行。但它仍然可以完成。

Answer 2

我会这样做：

$(document).ready(function () {
    $("input[type=radio]").change(function () {
       alert( $(this).val() )
    });
});

只能有 type=radio 的输入，因此通过 tagName 选择它要快得多。

Answer 3

诀窍可能是使用on()监听器 - http://jsfiddle.net/mmNUE/3/

$(document).ready(function () {
    $("*[type=radio]").on('change', function () {

         alert( $(this).val());

    })
})

并使用val();而不是attr();