JSFiddle - React, Tailwind, and code Playground

HTML

<input type=checkbox name="color" value="red">Red<br>
<input type=checkbox name="color" value="blue">Blue<br>
<input type=checkbox name="color" value="white">White<br>

<input type=checkbox name="size" value="small">Small<br>
<input type=checkbox name="size" value="medium">Medium<br>
<input type=checkbox name="size" value="large">Large<br>
<span class="link"></span>

JavaScript

$("input[type=checkbox]").on("change", function(){
	var arr = []
	$(":checkbox").each(function(){
	   if($(this).is(":checked")){
		 arr.push($(this).val())
	   }
	})
	var vals = arr.join(",")
  var name = $(this).attr('name')
	var str = "http://example.com/products?" + name + "=" + vals
	console.log(str);
  
  if (vals.length > 0) {
    $('.link').html($('<a>', {
      href: str,
      text: str
    }));
  } else {
    $('.link').html('');
  }  
})