onclick window.location.href with input multiple value

I have several check boxes (from the blog label). I use the following code to load whatever labels are selected, but this only works in one label.

I have tried it, but it only works for one check label and the checkbox input goes away and only loads the page

/search/?q=label:Topic1

my code

    <ul>
    <li> <input class="topik" type="checkbox" value="label:topik1"></li>
    <li> <input class="topik" type="checkbox" value="label:topik2"></li>
    <li> <input class="topik" type="checkbox" value="label:topik3"></li>
    <li> <input class="topik" type="checkbox" value="label:topik4"></li>
    <li> <input class="topik" type="checkbox" value="label:topik5"></li>
    </ul>

     jQuery(document).ready(function($) {
     $(".topik").change(function() { 
     window.location.href = '/search/?q=' + this.value;
     });
     });

Now the question is I want to be able to run more than one label to choose from. How can I do it in the code? Now the question is I want to be able to run more than one label to choose from. How can I do it in code? Makes loading pages with the following format

/search/?q=label:Topic1|label:Topic2|label:Topic3

Thank you for the help!