Deselect Specific Checkbox After Selecting Range of Checkboxes

I hope my title makes sense. With the following code I can do the following: Select Row 6 followed by selecting row 1 in which everything in between is also selected. This is what I want. What I'd also like to do is have the ability to deselect a specific checkbox, for example row 3, while keeping all the other rows selected. Currently, this does not work with my current code.

After selecting a range of check boxes how can one deselect a specific box or two if required?

<div id="wrap">
<span>Row 1<input type="checkbox" name='test'></span>
<span>Row 2<input type="checkbox" name='test'></span>
<span>Row 3<input type="checkbox" name='test'></span>
<span>Row 4<input type="checkbox" name='test'></span>
<span>Row 5<input type="checkbox" name='test'></span>
<span>Row 6<input type="checkbox" name='test'></span>
<input type='button' value="clear" />
</div>


var checkbox = $("#wrap input[type='checkbox']");
checkbox.click(function() {
var first = $("#wrap input[type='checkbox']:checked").first().parent().index(),
    last = $("#wrap input[type='checkbox']:checked").last().parent().index(),
    length = checkbox.length;
  for (var i = 0; i < length; i++) {
    if (i >= first && i <= last)
      checkbox[i].checked = true;
    else
      checkbox[i].checked = false;
  }
});

function uncheckAll() {
  $("input[type='checkbox']:checked").prop("checked", false)
}
$(':button').on('click', uncheckAll)