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，而不是将 URL 显示为：

<块引用>

/?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

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

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>

更改单选按钮选择的 URL

2 个答案: