SOURCE

$(document).ready(function () {
  /**
  * Add button click handler
  */
  function onAdd() {
    var $ul, li, $li, $label, $div, value;
    value = $('.js-new-item').val();
    //validate against empty values
    if (value === '') {
      return;
    }
    $ul = $('ul');
    $li = $('<li>').appendTo($ul);
    $div = $('<div>')
          .addClass('checkbox')
          .appendTo($li);
    $label = $('<label>').appendTo($div);
    $('<input>')
      .attr('type', 'checkbox')
      .addClass('item')
      .attr('name', 'list')
      .click(toggleRemoved)
      .appendTo($label);
    $label.append(value);
    $('.js-new-item').val('');
  }
  /**
  * Checkbox click handler -
  * toggles class removed on li parent element
  * @param ev
  */
  function toggleRemoved(ev) {
    var $el;
    $el = $(ev.currentTarget);
    $el.closest('li').toggleClass('removed');
  }
  $('.js-add').click(onAdd);
  $('.js-item').click(toggleRemoved);
});

function onChangeTitle() {
  $('h2').text($('.js-change-title').val());
}
$('.js-change-title').keyup(onChangeTitle);

<div class="container">
    <h2>My Shopping List</h2>
    <div class="input-group">
        <input placeholder="add shopping list item" type="text" class="js-new-item form-control">
        <span class="input-group-btn">
          <button class="js-add btn btn-default"
          type="button">Add!</button>
        </span>
    </div>
    <ul>
        <li>
            <div class="checkbox">
                <label>
                  <input class="js-item" name="list"
                  type="checkbox"> Carrot
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                  <input class="js-item" name="list" type="checkbox"> Book
                </label>
            </div>
        </li>
        <li class="removed">
            <div class="checkbox">
                <label>
                  <input class="js-item" name="list" type="checkbox"
                  checked> Gift for aunt's birthday
                </label>
            </div>
        </li>
    </ul>
</div>

<div class="container">
  <h2>My Shopping List</h2>
  <!-- ... -->
  <div class="footer">
    <hr/>
    <em>Change the title of your shopping list here</em>
    <input class="js-change-title" type="text"
    value="My Shopping List"/>
  </div>
</div>

.container {
  width: 40%;
  margin: 20px auto 0px auto;
}
.removed {
  color: gray;
}
.removed label {
  text-decoration: line-through;
}
ul li {
  list-style-type: none;
}