当我选择单选按钮时,我正在尝试更改 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
我将如何修改它以使用单选按钮?
答案 0 :(得分: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
});
答案 1 :(得分:0)
在您的情况下,单选按钮进行单选,因此无需循环每个单选,只需更改当前单击的值和数据,然后使用数据参数作为键创建对象,然后循环遍历键并创建和键+值数组如下;片段:
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>