HTMLのチェックボックスに選択上限を設ける方法【Javascript × input[type=”checkbox”]】

HTML

<div class="flex">
    <!---->
    <div class="box">
    <input type="checkbox" name="myCheck" id="myCheck1" value="tokyo">
    <label for="myCheck1">東京都</label>
    </div>
    <!---->
    <div class="box">
    <input type="checkbox" name="myCheck" id="myCheck2" value="kanagawa"> 
    <label for="myCheck2">神奈川県</label>
    </div>
    <!---->
    <div class="box">
        <input type="checkbox" name="myCheck" id="myCheck3" value="saitama"> 
        <label for="myCheck3">埼玉県</label>
    </div>
    <!---->
    <div class="box">
        <input type="checkbox" name="myCheck" id="myCheck3" value="chiba"> 
        <label for="myCheck3">千葉県</label>
    </div>
    <!---->
</div><!--end flex-->

Javascript

var max = 2;
var checkbox = document.querySelectorAll("input[type='checkbox']");
for(var n = 0;n < checkbox.length;n++){
    checkbox[n].addEventListener("change",function(elm){//チェックボックスにchangeイベントを登録
        var checked = document.querySelectorAll("input[type='checkbox']:checked");//チェックの数を集計
        if(max < checked.length){//3つめのチェックからはアラートを出してNGにする
            alert("選択できるのは2つまでです。");
            this.checked = false;
        }else{
            checked = document.querySelectorAll("input[type='checkbox']:checked");//取得し直す
            var arr = [];
            for(var i = 0;i < checked.length;i++){
                arr.push(checked[i].value);
            }//end for
            document.getElementById("res").innerText = arr.join(',');
        }//end if
    },false);//end change
}//end for