Encode checkboxes in query string then decode to set elements visible

Question

I feel like I'm trying to reinvent the wheel here in terms of encoding and decoding the query string.

I am using jQuery. I am creating a simple picture gallery with checkboxes for categories of what to show and what to hide.

So, my top menu will allow the user to choose what they want to see:

<input type="checkbox" name="all" value="all">All
<input type="checkbox" name="landscape" value="landscape">Landscape
<input type="checkbox" name="figure-drawing" value="landscape">Landscape
<input type="checkbox" name="still-life" value="still-life">Still Life
...

I expect the query string will look something like this:

?check1=landscape&check3=still-life

Each time the user checks a box, the page will refresh with a new query string and the collection.

// set up handler for checkboxes
$( document ).ready(function() {
    $( "input[type=checkbox]" ).on( "click", countChecked );
});

var countChecked = function() {
  var listt = $( "input:checked" );
    params = $.param(listt); // this is not right
    console.log(listt);
};
countChecked();

(You can see where I lost the plot, there on the 'params =' line)

This was the query string parser I had, but it only accepts a single parameter. I'd like it to accept any number.

function processFilter() {
    // process query string
    var qs = function() {
        var s = window.location.search.substr(1),   
        p = s.split(/\&/), l = p.length, kv, r = {};

        if (l === 0) { return false; }

        while (l--) {
            kv = p[l].split(/\=/);
            r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
        }

        return r;
    }();

    var allPics = $('article')
    var typeFilter =    qs.filter || null;

    // check the query string filter
    if (typeFilter !== null) {
        // it is not null, process it
        $.each(allPics, function(i,v) {
            if ($(v).hasClass(typeFilter)) {
                $(v).css('display','inline-block');
            }
        });
    } 
    else {
        // it is null, treat as all
        $.each(allPics, function(i,v){
            $(v).css('display','inline-block');
        });
    }
}

So the page loads with all pics display:none and then the parser display: inline-block any items that have a matching tag.

So, if the user checked landscape and still-life, then any 'articles' that hasClass() landscape or still-life will be .css('display','inline-block')ed.

Here is my image template, which I'm building from a .json object.

$("body").append (
"<article style='display:none;' class='"+v.tags+"'>" + 
                "<div class='wrapper'>" +
                    "<img src='img/" + v.folder + "/IMG_" + v.img + ".jpg' height='225' width='300'/>" +
                "</div>" +
                "<p>" +
                    "<span class='imgno'>" + v.img + "<br><span class='smaller'>" + v.store + "</span>" + "</span>" +
                    "<span class='descrip'>" + v.text + "</span>" +
                "</p>" +
            "</article>\n"
});

I feel like I'm trying to stuff a round peg in a square hole here - doing more work than necessary to bend the code I have to suit my new needs. I feel like there are existing code snippets that do just what I want - not the image part, but the encoding of checkboxes into the query string and the decoding of querystring into a usable object I can iterate through.

Answer 1

Here is an example: https://codesandbox.io/p/sandbox/confident-dewdney-nkvyh4.

Instead of parsing query parameters by yourself, you can use URLSearchParams.

I would recommend not using class names if you only want to use them as selectors. Using data attributes is preferable in this case.

Also, wouldn't it be better to hide/show images without refreshing the page? Anyway, you can adapt the example to suit your needs.