JSFiddle - React, Tailwind, and code Playground

by veer712

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://listjs.com/no-cdn/list.js"></script>
<div id="fileList">
<input class="search" placeholder="Search" />
<a href="#" id="showSelected">Show Selected</a>
<a href="#" id="showAll">Show All</a>
<ul class="list">
<li class="show">
  <input class="chkClass" type="checkbox" name="filesList[117312_abc_55.gz]" value="117312_abc_55.gz"/>
  <label class="name">117312_abc_55.gz</label>     
</li>
<li class="show">
  <input class="chkClass" type="checkbox" name="filesList[118312_abc_55.gz]" value="118312_abc_55.gz"/>
  <label class="name">118312_abc_55.gz</label>     
</li>
<li class="show">
  <input class="chkClass" type="checkbox" name="filesList[119312_abc_55.gz]" value="119312_abc_55.gz"/>
  <label class="name">119312_abc_55.gz</label>     
</li>
<li class="show">
  <input class="chkClass" type="checkbox" name="filesList[test.zip]" value="test.zip"/>
  <label class="name">test.zip</label>     
</li>
</ul>
</div>

CSS

.list {list-style-type:none;}
ul{margin-left:0px;padding-left:0px;}
.list li{width:160px;}
.chkClass{float:left;}
.name {float:left;}

JavaScript

var options = {valueNames: [ 'name']};
  var userList = new List('fileList', options);
  $("#showSelected").click(function(){
    $(".show").css("display","none");
    var n = $( "input:checked" ).length;
    $( "input:checked" ).each(function(){
        $(this).parent().css("display","block");
        console.log($(this).val());
    })
  });
  
  $("#showAll").click(function(){
    $(".show").css("display","block");    
  });