JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<ul class="MOD_ns">
    <li class="selectionRow active">
        <span class="MOD_Checked handle"></span>
        <span>Bla bla bla bl abla bla bla bla</span>
    </li>
    <li class="selectionRow">
        <span class="MOD_Unchecked handle"></span>
        <span>Bla bla bla bl abla bla bla bla</span>
    </li>
</ul>

CSS

.selectionRow { padding: 5px; border: 1px solid #eee; }
.active { background-color: #d0d9e5; }
.handle { display: inline-block; width: 10px; height: 15px; margin-right: 10px; cursor: pointer; }
.MOD_Checked { background-color: #7bf; }
.MOD_Unchecked { background-color: #579; }

JavaScript

$('.MOD_Checked, .MOD_Unchecked', '.MOD_ns').live('click', function(){
    var $this = $(this),
        $row = $this.closest('.selectionRow');

    if ($row.length) {
        $row.toggleClass('active', $this.hasClass('MOD_Unchecked'))
    }
    
    if ($this.hasClass('MOD_Checked')) {
        $this.removeClass("MOD_Checked").addClass("MOD_Unchecked");
    }
    else {
        $this.removeClass("MOD_Unchecked").addClass("MOD_Checked");
    }
});