JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<ul class="selectable">
    <li><input type="checkbox"/>Symbol 1</li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
    <li><label><input type="checkbox"/>Symbol 1</label></li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
    <li><label><input type="checkbox"/>Symbol 1</label></li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
    <li><label><input type="checkbox"/>Symbol 1</label></li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
</ul>
<div id="log"></div>

CSS

label, .selectable li  { cursor:pointer }
input[type="checkbox"] { margin-right:4px }
.selected { background:#0f0;color:#fff }
#log { font-weight:bold; margin: 10px 0 }

JavaScript

$.fn.listSelectable = function(){
    var elms = [],
        log = $('#log');
    
    return this.each(function(){
        var $this = $(this);
        
        $this.toggle(
            function() {
                var $this = $(this);
                    
                var el = $this
                    .addClass('selected')
                    .stop(true, true)
                    .animate({ 'margin-left' : '15px' }, 200 );
                
                var input = el
                    .find('input');
                
                console.log(input.is(':checked'));
                if( input.is(':checked') === false ){
                    input.prop('checked', true);
                }
                console.log(input.is(':checked'));
                
                elms.push( $this.text() );
                log[0].innerHTML = elms;
            },
            function() {
                var $this = $(this);
                
                var el = $this
                    .removeClass('selected')
                    .stop(true, true)
                    .animate({ 'margin-left': '0' }, 200 );
                var input = el
                    .find('input');
                    
                if( input.is(':checked') === true ){
                    input.prop('checked', false);
                }
                var test = elms.indexOf( $this.text() );
                
                if( test != -1 ){
                    elms.splice( test, 1 );
                    log[0].innerHTML = elms;
                }
                
            }
        );
    });
};

$('ul.selectable li').listSelectable();