Function working except when you click it first time, Chrome

I have created a JavaScript onclick function. It works fine in Firefox. but in Chrome/IE, function working except when you click it first time. My code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

function KeepCount() {
  
  var mytextbox = document.getElementById('onclickval1');
  var myform = document.getElementById('compare-meet');
  var inputElems = myform.getElementsByTagName("input");
  for (var i=0; i<inputElems.length; i++) {
    inputElems[i].onchange = function(){
        if(this.checked){
            
            mytextbox.value += this.value +",";
            s = document.getElementById("onclickval1").value;
            n = s.split(',').length;
            if (n > 5)
            {
                alert('Pick Just Four Please!')
                this.checked = false
                mytextbox.value = mytextbox.value.replace(this.value+",", "")
                document.comparepage; return false;
            }
            if (n < 3)
            {
                document.getElementById('compsend').disabled=true;
            }
            if (n > 2)
            {
                document.getElementById('compsend').disabled=false;
            }
        }else{
            mytextbox.value = mytextbox.value.replace(this.value+",", "");
            s = document.getElementById("onclickval1").value;
            n = s.split(',').length; 
            if (n < 3)
            {
                document.getElementById('compsend').disabled=true;
            }
            if (n > 2)
            {
                document.getElementById('compsend').disabled=false;
            }
        }
    }
  }
}
</script>
</head>

<body>
<form id="compare-meet" action="" name="comparepage" method="post">
<input id="onclickval1" type="text" value="" name="getval1" size="30">
<table id="datatable-1" class="views-table">
    <thead>
    <tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="
                  ">
          <span id="compbutt"><input id="compsend" title="Select atleast 2 school to compare" disabled="" type="submit" value="Compare &amp; Meet" name="compare"></span>        </th></tr>
  </thead>
  
<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="views-row-first odd">
                  <td class="">
            <input onclick="KeepCount()" class="5353" id="compare" type="checkbox"  value="5353">          </td>
              </tr><tr class="even">
                  <td class="">
            <input onclick="KeepCount()" class="5357" id="compare" type="checkbox"  value="5357">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input onclick="KeepCount()" class="5533" id="compare" type="checkbox"  value="5533">          </td>
              </tr><tr class="even">
                  <td class="">
            <input onclick="KeepCount()" class="5793" id="compare" type="checkbox"  value="5793">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input onclick="KeepCount()" class="5563" id="compare" type="checkbox"  value="5563">          </td>
              </tr></tbody></table>
</form>
</body>
</html>

Solution

The keepCount() method is used to register a on change event handler, so you need to execute it on document load, not on click of the input element.

So what happens is when the first click happens there is no onchange event handler registered, so it will not get fired, and it registers a onchange event then. When the second click happens you have a onchange event handler registered so it gets fired
The problem with this is as you keep executing KeepCount method the every click will make the onchange habdler to fire multiple times

Ex:

function KeepCount() {

    var mytextbox = document.getElementById('onclickval1');
    var myform = document.getElementById('compare-meet');
    var inputElems = myform.getElementsByTagName("input");
    for (var i=0; i<inputElems.length; i++) {
        inputElems[i].onchange = function(){
            if(this.checked){

                mytextbox.value += this.value +",";
                s = document.getElementById("onclickval1").value;
                n = s.split(',').length;
                if (n > 5)
                {
                    alert('Pick Just Four Please!')
                    this.checked = false
                    mytextbox.value = mytextbox.value.replace(this.value+",", "")
                    document.comparepage; return false;
                }
                if (n < 3)
                {
                    document.getElementById('compsend').disabled=true;
                }
                if (n > 2)
                {
                    document.getElementById('compsend').disabled=false;
                }
            }else{
                mytextbox.value = mytextbox.value.replace(this.value+",", "");
                s = document.getElementById("onclickval1").value;
                n = s.split(',').length; 
                if (n < 3)
                {
                    document.getElementById('compsend').disabled=true;
                }
                if (n > 2)
                {
                    document.getElementById('compsend').disabled=false;
                }
            }
        }
    }
}

window.onload = KeepCount;

And remove the onclick="KeepCount()" from the checkboxes

Demo: Fiddle