更改单选按钮选择的 URL

Question

当我选择单选按钮时，我正在尝试更改 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

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

Answer 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

});

Answer 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>