JSFiddle - React, Tailwind, and code Playground

HTML

<form name="test_form" action="#">


  <button name="submit" class="btn-submit" onclick="whereToGo();">
 submit
</button>
  <br />
  <input type="checkbox" name="program" id="pg1" value="java" class="pickup" checked="checked" />Java<br />
  <input type="checkbox" name="program" id="pg2" value="python" class="pickup" />Python<br />
  <input type="checkbox" name="program" id="pg3" value="javascript" class="pickup" checked="checked" />Javascript<br />
  <input type="checkbox" name="program" id="pg4" value="go" class="pickup" />Go<br />
</form>

CSS

.btn-submit {
  width: 100px;
  padding: 2px 3px;
}

.pickup {
  width: 25px;
  height: 25px;
}

JavaScript

function whereToGo() {
  var x = document.getElementsByClassName("pickup");
  var elements = document.forms[0].elements;
  var cnt = 0;

  for (j = 0; j < elements.length; j++) {
    var el = elements[j];
    if (el.getAttribute("type") == "checkbox") {
      cnt += 1;
    }
  }


  /*for (i = 0; i < x.length; i++) {
    if (x[i].checked) cnt += 1;
  }*/
  alert("count=" + cnt);

  return false;
}