未选中复选框时使用 Ajax 删除 url 参数答案

【问题标题】：Remove url parameter with Ajax when checkbox is unchecked未选中复选框时使用 Ajax 删除 url 参数
【发布时间】：2020-08-26 19:32:06
【问题描述】：

所以基本上，我的这段代码取自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 中的新参数重新加载页面。

现在我想在复选框未选中但找不到方法时删除参数。

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

【问题讨论】：

标签： javascript jquery ajax wordpress

【解决方案1】：

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

我不是 100% 清楚该 WP 插件的搜索参数是什么样的，所以我使用了一些非常简单的参数，并且只使用它们的键来匹配复选框名称。

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

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

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>

【讨论】：

【解决方案2】：

非常好的代码，我用它在 URL 中添加或删除了 DEBUG 标志。

要获得这样的 URL：

http://www.example.com/?foo=1&bar=2&debug=1

这是我的修改版本：

<label>
    <input type="checkbox" id="debug" value="1" <?= ($_GET['debug'] == '1' ? 'checked' : '') ?> />
    Debug
</label>

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

<script>
$('#debug').click(function(e)
{
    const url_obj = new URL(location.href);
    const params = url_obj.searchParams;

    // Append when checkbox gets checked and delete when unchecked
    if (this.checked) {
        params.append(this.id, '1');
    } else {
        params.delete(this.id);
    }

    window.location = url_obj.href;
});
</script>

【讨论】：