Bonus Question

Matslabs question 5 bonus

//
// Matslab Question 5 Bonus 
// Howard PAnton
//

(function() {

// Add new input option
  $(".add_button").click(function(){
    var value = $(".option_name").val();
    $( ".checklist" ).append( "<label><input type=\"checkbox\" value=\"" + value + "\" /><span class=\"option_name\">" + value + "</span></label>" );
    return false;
    get_selected();
  });


// <label><input type="checkbox" checked="checked" /><span class="option_name">Option 2</span></label>


  var get_selected = function() {
  var selected = [];
  var index;
  var i;

  // Remove old list
  $( ".items" ).remove();

  // Create an Array of cheked items
  $(".checklist").find("input:checked").each(function (i, ob) {
    selected.push($(ob).val());
  });

  // Output all checked items in div
  $( ".selected_options" ).append( "<ul class=\"items\">" );
  for (index = 0; index < selected.length; ++index) {
    $( ".selected_options ul.items" ).append( "<li><span>" + selected[index] + "</span></li>" );
    ++i;
  }

  };


  // We need to remove items when checked and unchecked
  $( ".checklist" ).on( "click", "input", function() {

    var checked = $(this);

    if ( checked.is(':checked') ) {
      $(checked).attr('checked');
      get_selected();
    } else {
      $(checked).removeAttr('checked');
      get_selected();
    }

  });

  // Create the list on doc load
  $(function() {
    get_selected();
  });

}());