フォームに入力した時のみ画面遷移時にアラート表示する方法3

HTML

<form action="index3.html" method="get">
  <input type="text" class="checkValue">
  <input type="checkbox" class="checkValue">
  <input type="radio" class="checkValue">
  <select class="checkValue">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
  </select>
  <hr>
  <input type="submit" value="送信">
</form>

JavaScript

  var checkValue = document.querySelectorAll('.checkValue');
  var submitBtn = document.querySelector('input[type="submit"]');
  var checkFlag = false;
  var onBeforeunloadHandler = function(e) {
    var msg = 'このページから移動すると入力フォームの内容が消えます。';
    e.returnValue = msg;
  };
  var formAlert = function() {
    if(!checkFlag) {
      window.addEventListener('beforeunload', onBeforeunloadHandler);
      for(var i = 0; i < checkValue.length; i++) {
        checkValue[i].removeEventListener('input', formAlert);
        checkValue[i].removeEventListener('change', formAlert);
      }
      checkFlag = true;
    }
  };
  for(var i = 0; i < checkValue.length; i++) {
    checkValue[i].addEventListener('input', formAlert);
    checkValue[i].addEventListener('change', formAlert);
  }
  submitBtn.addEventListener('click', function() {
    window.removeEventListener('beforeunload', onBeforeunloadHandler);
  });