Как отобразить только выбранные элементы?

Question

[Im p3l]

Добрый день,
Пытаюсь сделать, чтобы при нажатии на кнопку Choosed, отображались только выбранные элементы списка.
А при нажатии на Active остальные.

<ul id="list">
  <li>
    <div class="task">
      <label> <input class="toggle" type="checkbox">First</label>
    </div>
  </li>
  <li>
    <div class="task">
      <label> <input class="toggle" type="checkbox">Second</label>
    </div>
  </li>
  <li>
    <div class="task">
      <label> <input class="toggle" type="checkbox">Third</label>
    </div>
  </li>
</ul>
<a href="#" class="show-checked">Choosed</a>
<br/>
<a href="#" class="show-active">Active</a>

li {
  list-style: none;
}
a {
  text-decoration: none;
}

$('.show-checked').on('click', function() {
    $('li input:checked').html()
});

Comments

[R-Oscar]

jsbin.com/mapiwuwuwu/edit?js,output

Answer 1

[Ян]

$(document).ready(function(){
    $('a.show-checked').on('click', function(e) {
        e.preventDefault()
        $('input:not(:checked)').parents('li').hide();
        $('input:checked').parents('li').show();
    });
    $('a.show-active').on('click', function(e) {
        e.preventDefault()
        $('input:not(:checked)').parents('li').show();
        $('input:checked').parents('li').hide();
    });
})