Question

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

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

查看更多代码：jsfiddle

Answer 1

我会这样做：

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

只能输入type = radio，所以通过tagName选择它会快得多。

Answer 2

诀窍可能是使用on()听众 - http://jsfiddle.net/mMNUE/3/

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

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

    })
})

并使用val();代替attr();

Answer 3

根据您的jsfiddle，您的单选按钮对按顺序命名：第一对名为1，第二对名为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();
    });
});

Here's a jsfiddle我用location.href调用替换alert赋值，这样包含执行代码的帧就不会消失。只要您符合您的命名标准，这将有效。如果您将单选按钮名称更改为radiobutton_1而不是1，则只需修改location.href行以合并全名。

如果不与您的命名一致，那么您必须手动为每个按钮分配click个事件，而不是在循环中执行此操作。但它仍然可以完成。

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

3 个答案: