更改单选按钮选择的 URL

Posted 2023-05-09

【中文标题】更改单选按钮选择的 URL

【英文标题】：Changing URL on radio button selection

【发布时间】：2021-04-09 12:38:57

【问题描述】：

当我选择单选按钮时，我正在尝试更改 URL。

我发现 an answer 适用于“选择”表单元素，但如果我将其应用于我的单选按钮，它会列出所有选项而不是选定的选项

我的 JS

$('.unitfiltercontrol').change(function()
    var params =[];
    $('.unitfiltercontrol').each(function()
        $this=$(this);
        if(!$this.val()=='') params.push($this.data('param')+'='+encodeURIComponent( $this.val() ));
    );
    $('#urlDisplay').text(window.location.href+('?'+params.join('&'))); //print to div for testing
);

我的 html：

<form>
  <input id="radio1" type="radio" value="1" name="foo" data-param="foo" class="unitfiltercontrol">
  <input id="radio2" type="radio" value="2" name="foo" data-param="foo" class="unitfiltercontrol">

  <input id="radio3" type="radio" value="1" name="bar" data-param="bar" class="unitfiltercontrol">
  <input id="radio4" type="radio" value="2" name="bar" data-param="bar" class="unitfiltercontrol">
</form>
<div id="urlDisplay"></div>

所以如果我选择radio1，而不是显示为：

/?foo=1

我明白了：

/?foo=1&foo=2&bar=1&bar=2

如何修改它以使用单选按钮？

【参考方案1】：

你好朋友，你可以在将参数推送到下面时使用 if 条件

$('.unitfiltercontrol').change(function()
var params =[];
$('.unitfiltercontrol').each(function()
    $this=$(this);
    if ($(this).prop("checked"))  //get the values of only checked radio buttons
       if(!$this.val()=='') params.push($this.data('param')+'='+encodeURIComponent( $this.val() ));
    
    
);
$('#urlDisplay').text(window.location.href+('?'+params.join('&'))); //print to div for testing

);

【参考方案2】：

单选按钮在您的情况下进行单选，因此无需循环每个单选，只需更改当前单击的值和数据，然后使用 data-param 作为键创建对象，然后循环彻底键并创建和键+值数组如下； sn-p：

let values = ;

$('.unitfiltercontrol').change(function(e)
  let data = $(this).data('param');
  let value = this.value;
  values[data] = value;
  let params = [];
  
  let keys = Object.keys(values);
  
  for(inc = 0; inc < keys.length ; inc ++) 
    let key = keys[inc];
    params.push(key+'='+encodeURIComponent(values[key]))
  
  
    $('#urlDisplay').text(window.location.href+('?'+params.join('&'))); 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
My HTML:

<form>
  <input id="radio1" type="radio" value="1" name="foo" data-param="foo" class="unitfiltercontrol">
  <input id="radio2" type="radio" value="2" name="foo" data-param="foo" class="unitfiltercontrol">

  <input id="radio3" type="radio" value="1" name="bar" data-param="bar" class="unitfiltercontrol">
  <input id="radio4" type="radio" value="2" name="bar" data-param="bar" class="unitfiltercontrol">
</form>

<div id="urlDisplay"></div>
<div id="urlDisplay">

</div>

【讨论】：

我明白了，谢谢，它适用于 1 个单选按钮。如果我有多个单选按钮要添加到 URL 中，例如/?foo=1&bar=1。目前，无论使用的单选按钮如何，代码都只显示最后一个参数。我已经更新了问题 HTML。

@user2265915 好的，我明白了，你能看到编辑后的答案