获取当前 URL 并更新 URL 中的参数答案

【问题标题】：Get current URL and update parameters in URL获取当前 URL 并更新 URL 中的参数
【发布时间】：2021-01-16 16:22:49
【问题描述】：

提前感谢您的宝贵时间。

我正在尝试从 URL 中获取值并自动填充单选选项。

示例网址 = https://example.com/v2-search/?&orderBy=relevance&tags=Kinship

<form action="https://example.com/v2-search/?" method="GET" >
    <div class="uk-inline">
        
        <div class="uk-inline">

           <label>Filter by: <label> 
           <input id="distance" class="uk-radio" type="radio" name="orderBy" value="distance"> Distance 
            <input id="relevance" class="uk-radio" type="radio" name="orderBy" value="relevance" > Relevance 

        </div>
        
        <div class="uk-inline">
        <button style="margin-left: 15px;" class="uk-button uk-button-primary uk-button-small uk-mobile-width">Update</button>
    </div>

    </div>

</form>

这是我在 cmets 中使用的 JS。

function autoFill() {
  var ob = url.searchParams.get("orderBy"); //Getting the value from the URL for the first radio options selected.
  var radioElements = document.getElementsByName("orderBy"); //Selecting the first radio options.

  for (var i=0; i<radioElements.length; i++) {
    if (radioElements[i].getAttribute('value') == 'ob') {
      radioElements[i].checked = true; //Adding checked to the value based on the URL
    }
  }
}

【问题讨论】：

标签： javascript html forms radio

【解决方案1】：

您可以将 URL 查询（搜索）字符串解析为 URLSearchParams 实例，这样可以更轻松地获取值。

然后您可以搜索相关的单选按钮并检查是否找到

const params = new URLSearchParams(location.search)
const orderBy = params.get("orderBy")

const radio = document.querySelector(`input[name="orderby"][value="${orderBy}"]`)
if (radio) {
  radio.checked = true
}

【讨论】：