updated checkbox selection

by merganser

HTML

<fieldset class="group">
  <legend>Select standard pizza toppings</legend>
  <div class="checkAllWrapper">
    <input type="checkbox" id="checkAll" value="all" /><label for="checkAll">Check All</label>
  </div>
  <ul class="checkbox">
    <li><input type="checkbox" id="cb1" value="pepperoni" /><label for="cb1">Pepperoni</label></li>
    <li><input type="checkbox" id="cb2" value="sausage" /><label for="cb2">Sausage</label></li>
    <li><input type="checkbox" id="cb3" value="mushrooms" /><label for="cb3">Mushrooms</label></li>
    <li><input type="checkbox" id="cb4" value="onions" /><label for="cb4">Onions</label></li>
    <li><input type="checkbox" id="cb5" value="gpeppers" /><label for="cb5">Green Peppers</label></li>
    <li><input type="checkbox" id="cb6" value="xcheese" /><label for="cb6>">Extra Cheese</label></li>
  </ul>
</fieldset>

<h3 id="log">

</h3>

CSS

fieldset.group {
  margin: 0;
  padding: 0;
  margin-bottom: 1.25em;
  padding: .125em;
}

fieldset.group legend {
  margin: 0;
  padding: 0;
  font-weight: bold;
  margin-left: 20px;
  font-size: 100%;
  color: black;
}

div.checkAllWrapper {
  border-bottom: 1px solid black;
  padding: 5px;
  margin: 5px;
  
}

ul.checkbox {
  margin: 0;
  padding: 0;
  margin-left: 0px;
  list-style: inline-block;
}

ul.checkbox li {
  border: 1px transparent solid;
  float: left;
  list-style: outside none none;
  width: 48%;
}

ul.checkbox li:hover,
ul.checkbox li.focus {
  background-color: lightyellow;
  border: 1px gray solid;
}

ul.checkbox li input {}

ul.checkbox li label {}

JavaScript

$(document).ready(function() {

  $("input[type=checkbox]").change(setLog);

  $("ul.checkbox li").click(function() {
    $(this).find("input[type=checkbox]").prop("checked", true);
  });

  $("input#checkAll").change(function() {
    var checkboxValue = $(this).is(':checked');
    var checkboxInputs = $("ul.checkbox li input[type=checkbox]");
    $.each(checkboxInputs, function(index, query) {
      $(this).prop("checked", checkboxValue);
    });
    setLog();
  });

});

function setLog() {
  var count = $('.checkbox input[type=checkbox]:checked').length;

  $("#log").html("Checked:" + count);
}