jQuery。从 URL 获取参数值并检查单选按钮答案

【问题标题】：jQuery. Get parameter value from URL and check radiobuttonjQuery。从 URL 获取参数值并检查单选按钮
【发布时间】：2014-01-17 16:47:08
【问题描述】：

我正在尝试根据 URL 中的参数值自动检查单选按钮。这些参数是在用户选择一些值并在上一页提交表单后添加到 URL 中的。在下一页上，有一个具有相同输入和其他一些输入的表单。我想要做的是检查用户在上一页为收音机选择的相同值。

假设我有第二页的 URL：domain.com/page.html?checkbox-one=1&checkbox-two=0

在这个页面我有无线电输入：

    <input type="radio" name="checkbox-one" value="0" id="radio1" />
    <label for="radio1">Radio#1</label>

    <input type="radio" name="checkbox-one" value="1" id="radio2" />
    <label for="radio2">Radio#2</label>

    <input type="radio" name="checkbox-two" value="0" id="radio3" />
    <label for="radio3">Radio#3</label>

    <input type="radio" name="checkbox-two" value="1" id="radio4" />
    <label for="radio4">Radio#4</label>

在这种情况下，我希望查看 name="checkbox-one" value="1" 和 name="checkbox-two" value="0" 已选中。

PHP 解决方案是不可取的，那么我如何使用 jQuery 来实现这一点。有没有办法读取 URL 参数值并根据它们检查单选按钮？

谢谢！

【问题讨论】：

标签： jquery html url checkbox radio-button

【解决方案1】：

This post 展示了如何从 URL 中获取参数值

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

然后您可以循环检查复选框，看看是否应该选中它们。

$("input[type=radio]").each(function() {
      var currInputName = $(this).attr('name');

      if(getParameterByName(currInputName) == '1'){
          $(this).prop("checked", true);
      }
});

您应该注意，您一次只能选中 1 个单选框。

【讨论】：

感谢您的回答，这很有帮助，并让我知道了如何进一步进行。请参阅我的解决方案，它使用 jQuery 替代方案。

【解决方案2】：

已接受的答案非常有帮助，但在我的情况下使用 jQuery 更可取，所以我使用了一些不同的解决方案。 Here 我找到了一个不错的 sn-p，我为了我的目的稍微修改了它。

// Getting query string parameters
var vars = [], hash;
var query = document.URL.split('?')[1];
if(query != undefined){
    query = query.split('&');
    for(var i = 0; i < query.length; i++){
        hash = query[i].split('=');
        vars.push(hash[1]);
        populateRadios();
    }
};

// Checking radio buttons
function populateRadios() {
    $("input[type=radio]").each(function() {
        $('input[name="' + hash[0] + '"][value="' + hash[1] + '"]').prop('checked', true);
    });
};

sn-p 解构查询字符串，并将参数及其值“放入”单独的哈希中。然后调用单选按钮检查函数，就是这样。

非常感谢您的 cmets 和改进建议。谢谢！

【讨论】：