JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div>    <span class="checkbox check_on"></span>
                    <span class="checkbox"></span>
                    <span class="checkbox"></span>
                    <span class="checkbox"></span>
                    <span class="checkbox check_on"></span>
                    <span class="checkbox check_on"></span>
                    <span class="checkbox"></span>
                    <span class="checkbox check_on"></span>
                    <span class="checkbox"></span>
                    <span class="checkbox"></span>
</div>
<button id="getVal">GetString</button>
<div id="setVal">Hello</div>

CSS

div { padding: 10px;}
span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: auto;
    cursor: pointer;
    background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/check-off.png) no-repeat;
}

span.check_on { background: url(http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/check-on.png) no-repeat; }

JavaScript

$('span.checkbox').click(function() {

    $(this).toggleClass('check_on');

});

$('#getVal').click(function() {

    var st = "";
    
    $('.checkbox').each(function(i) {
       console.log($(this));
        if ($(this).hasClass('check_on')) {
            st += "1" ;
       }
        else {
         st += "0" ;
        }
    });
    $('#setVal').text(st + " - " + parseInt(st, 2));
});