表單增強與驗證——複選框（選中All複選框）

HTML

<span style="font-size:12px;font-weight: normal;">           <label><input type="checkbox" value="all" id="all">All</label>
            <label><input type="checkbox" name="genre" value="animation">Animation</label>
            <label><input type="checkbox" name="genre" value="docs">Documentary</label>
            <label><input type="checkbox" name="genre" value="shorts">Shorts</label>
    <script src="js/utilities.js"></script>
    <script src="js/input-type.js"></script></span>

utilities.js

// Helper function to add an event listener
function addEvent (el, event, callback) {
  if ('addEventListener' in el) {                  // If addEventListener works
    el.addEventListener(event, callback, false);   // Use it
  } else {                                         // Otherwise
    el['e' + event + callback] = callback;         // CreateIE fallback
    el[event + callback] = function () {
      el['e' + event + callback](window.event);
    };
    el.attachEvent('on' + event, el[event + callback]);
  }
}

// Helper function to remove an event listener
function removeEvent(el, event, callback) {
  if ('removeEventListener' in el) {                      // If removeEventListener works
    el.removeEventListener(event, callback, false);       // Use it 
  } else {                                                // Otherwise
    el.detachEvent('on' + event, el[event + callback]);   // Create IE fallback
    el[event + callback] = null;
    el['e' + event + callback] = null;
  }
}

all-checkboxes.js

(function() {
  var form     = document.getElementById('interests'); // Get form
  var elements = form.elements;                      // All elements in form
  var options  = elements.genre;                     // Array: genre checkboxes
  var all      = document.getElementById('all');     // The 'All' checkbox


  function updateAll() {
    for (var i = 0; i < options.length; i++) {       // Loop through checkboxes
      options[i].checked = all.checked;              // Update checked property
      console.log(options[i].name);
    }
  }
  addEvent(all, 'change', updateAll);                // Add event listener


  function clearAllOption(e) {
    var target = e.target || e.srcElement;           // Get target of event
    if (!target.checked) {                           // If not checked
      all.checked = false;                           // Uncheck 'All' checkbox
    }
  }
  for (var i = 0; i < options.length; i++) {         // Loop through checkboxes 
    addEvent(options[i], 'change', clearAllOption);  // Add event listener
  }


}());