Question

我正在尝试根据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参数值并检查基于它们的单选按钮？

谢谢！

Answer 1

This post显示了如何从网址

获取参数值

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个电台盒。

Answer 2

接受的答案非常有用，但在我的情况下jQuery的使用是可取的，所以我使用了一个不同的解决方案。 Here我发现了一个很好的片段，我为了我的目的稍作修改。

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

该代码段解构查询字符串并将参数及其值“放入”单独的哈希值。然后调用单选按钮检查功能，就是这样。

我将非常感谢您的意见和改进建议。谢谢！

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

2 个答案: