JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="selected" name="selected" value="Blue" class="products" checked><br>
<input type="checkbox" id="selected" name="selected" value="Green" class="products" checked><br>
<input type="checkbox" id="selected" name="selected" value="Purple" class="products">
<div id="myEmptyDiv"></div>

JavaScript

var checkboxes = document.querySelectorAll('.products');

// Create listener for each
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', changeUrl);
}

function changeUrl(){
  var checked = Array.prototype.slice.call(document.querySelectorAll('.products:checked')).map(function(el){
    return el.value;
  }).join(',');

  var aEl = document.createElement("a");
  aEl.setAttribute("href", "http://example.com/?subject=Products&checked=" + checked);

  document.getElementById('myEmptyDiv').innerHTML = aEl;
}