取消选中复选框时，使用Ajax删除url参数 [英] Remove url parameter with Ajax when checkbox is unchecked

问题描述

因此，基本上，我的代码摘自高级自定义字段资源中心:

So basically, I have this code taken from Advanced Custom fields Ressource center:

<script type="text/javascript">
(function($) {
    
    // change
    $('#archive-filters').on('change', 'input[type="checkbox"]', function(){

        // vars
        var url = '<?php echo '//' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>';
            args = {};
            
        
        // loop over filters
        $('#archive-filters .filter').each(function(){
            
            // vars
            var filter = $(this).data('filter'),
                vals = [];
            
            
            
            
            // find checked inputs
            $(this).find('input:checked').each(function(){
    
                vals.push( $(this).val() );
            });
            
            
            // append to args
            args[ filter ] = vals.join(',');
            
        });
        
        
        // update url
        if (url.indexOf('?') > -1){
            //code
        url += '&';
        }
        else {  
        url += '?';
        }
        
        
        // loop over args
        $.each(args, function( name, value ){
            if (value==='') {
                url += '';
            }else {
                url += name + '=' + value + '&';
            }
            
        });
        
        
        // remove last &
        url = url.slice(0, -1);
        
        // reload page
        window.location.replace( url );
        

    });

})(jQuery);
</script>

当我在#archive-filters div中选中一个复选框时，它将使用url中的新参数重新加载页面.

When I check a checkbox in #archive-filters div, it reloads the page with the new parameter in url.

现在，我想在未选中此复选框但找不到方法的情况下删除该参数.

Now I Would like to remove the parameter when the checkbox is unchecked but can't find How.

如何删除与未选中复选框相关联的url参数?

How can I remove the url parameter associated to the checkbox unchecked?

推荐答案

处理所有这些问题的最简单方法是使用

The easiest way to handle all of this is with the URL API and URLSearchParams

我不是100％清楚该WP插件的搜索参数是什么样子，因此使用了一些非常简单的参数，仅使用其键来匹配复选框名称.

I'm not 100% clear what the search params look like for that WP plugin so have used some very simple ones and am only using their keys to match checkbox names .

也不确定在页面加载时是否选中了活动页面，但如果没有显示，请在此处说明如何操作

Also not sure if the active ones are checked or not on page load but show how to do it here if they are not

由于URL对象可以根据需要进行多次更新，因此它也为您提供了一种替代方法，即每次选中复选框时都可以重新加载，并允许用户在重新加载之前进行多项选择

Since the URL object can be updated as many times as you need it may also offer you an alternative to reloading every time checkbox is checked and allow users to make multiple selections before reloading

const url = 'http://example.com?foo=true&bar=true' // demo version
// const url = location.href - live version
const urlObj = new URL(url);
const params = urlObj.searchParams

const $checks = $(':checkbox')

// on page load check the ones that exist un url
params.forEach((val, key) => $checks.filter('[name="' + key + '"]').prop('checked', true));        

$checks.change(function(){
    // append when checkbox gets checked and delete when unchecked
    if(this.checked){
        params.append(this.name, 'true')
    }else{
        params.delete(this.name);       
    }
    // do your page load with location.href = urlObj.href
     console.clear()
     console.log(urlObj.href);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Foo <input type="checkbox" name="foo"/></label> 
<label>Bar <input type="checkbox" name="bar"/></label>
<label>Zzz <input type="checkbox" name="zzz"/></label>

这篇关于取消选中复选框时，使用Ajax删除url参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！