input[type=checkbox] を全てチェックする

HTML

<form>
  <ul id="sample">
    <li>
      <input id="genre1" type="checkbox" name="genre[]" value="1" />
      <label for="genre1">ジャンル1</label>
    </li>
    <li>
      <input id="genre2" type="checkbox" name="genre[]" value="2" />
      <label for="genre2">ジャンル2</label>
    </li>
    <li>
      <input id="genre3" type="checkbox" name="genre[]" value="3" />
      <label for="genre3">ジャンル3</label>
    </li>
    <li>
      <input id="genre4" type="checkbox" name="genre[]" value="4" />
      <label for="genre4">ジャンル4</label>
    </li>
    <li>
      <input id="genre5" type="checkbox" name="genre[]" value="5" />
      <label for="genre5">ジャンル5</label>
    </li>
  </ul>
</form>

CSS

#sample input {
  display: none;
}
#sample li {
  margin: 0.8em;
}
#sample input:checked + label {
  color: black;
  background-color: #fcc;
  border: solid 1px #f55;
}

JavaScript

'use strict';
document.addEventListener('DOMContentLoaded', function (event) {
  function handleChange (event) {
    var input = event.target,
        checked = input.checked;

    if (input.tagName !== 'INPUT') {
      return;
    }

    if (input.id === 'allcheck') {
      for (var i = 0, genre = input.form.elements['genre[]'], l = genre.length; i < l; ++i) {
        genre[i].checked = checked;
      }
    } else if (input.name === 'genre[]') {
      input.form.elements['allcheck'].checked = checked;
    }
  }

  function main () {
    var ul = event.target.getElementById('sample'),
        li = ul.firstElementChild.cloneNode(true),
        input = li.firstElementChild,
        label = li.lastElementChild;

    input.id = 'allcheck';
    input.name = 'allcheck';
    input.value = 0;

    label.htmlFor = 'allcheck';
    label.firstChild.data = '全てチェック／解除';

    ul.insertBefore(li, ul.firstElementChild);
    ul.addEventListener('change', handleChange, false);
  }

  main();
}, false);