JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<form id="selector">
<table >
    <tr>
        <td>1<input type="checkbox" value="1" checked/></td>
        <td>2<input type="checkbox" value="2"/></td>
        <td>3<input type="checkbox" value="3"/></td>
        <td>4<input type="checkbox" value="4"checked/></td>
        <td>5<input type="checkbox" value="5"checked/></td>
    </tr>
</table>
</form>
<br/>
<table id="precentage">
    <tr>
        <td>1<input type="checkbox" value="1" checked/></td>
        <td>2<input type="checkbox" value="2"/></td>
        <td>3<input type="checkbox" value="3" checked/></td>
        <td>4<input type="checkbox" value="4"/></td>
        <td>5<input type="checkbox" value="5" checked/></td>
        <td><div class="progressbar"></div></td>
    </tr>
    <tr>
        <td>1<input type="checkbox" value="1" checked/></td>
        <td>2<input type="checkbox" value="2" checked/></td>
        <td>3<input type="checkbox" value="3"/></td>
        <td>4<input type="checkbox" value="4" checked/></td>
        <td>5<input type="checkbox" value="5" checked/></td>
        <td><div class="progressbar"></div></td>
    </tr>    
</table>

CSS

#selector td{border:1px solid #6753FF;padding:5px;}
#precentage td{border:1px solid black;padding:5px;}
.progressbar{width:100px; height:15px;}

JavaScript

$('#selector input').live('click', function() {
    var numberChecked = $('#selector input:checked').length;
    console.log(numberChecked, 'numberChecked')

    var tableRows = $("#precentage tr");
    tableRows.each(function() {
        var eachRowChecked = $("input:checked", this).length;
        console.log($("input:checked", this).length);
        var progress = Math.round(numberChecked / eachRowChecked * 100);
        console.log(progress, 'progress')
        $(".progressbar", this).progressbar({
            value: progress
        });
    });
});

var array1 = $("#selector input:checked").each(function(){$(this).val();});
var arr1 = $(array1).toArray();
var array2 = $("#precentage tr:first input:checked").toArray();
console.log(arr1, 'arr1');
console.log(array2, 'array2');


//console.log(_.intersection(Array1, Array2));
//console.log(ArrayMatch,'ArrayMatch');

//var arr1 = Array1.length;
//var arr2 = ArrayMatch.length;
//console.log(arr1, 'arr1');
//console.log(arr2,'arr2');
//var answer = Math.round((arr2 / arr1) * 100);
//console.log(answer,'answer');
//actualy try to check if values are same and then calculate %
/*
intersection_.intersection(*arrays)
Computes the list of values that are the intersection of all the arrays. Each value in the result is present in each of the arrays.

_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2]
*/

var lol = _.intersection([array1], [101, 2, 1, 10]);
console.log(lol);