JSFiddle - React, Tailwind, and code Playground

by Stphane

HTML

<table>
	<thead>
		<tr>
			<th>first</th>
			<th>second</th>
			<th>third</th>
			<th>fourth</th>
		</tr>
	</thead>
	<tbody>
		<tr>
            <td><input id="a" value="1" type="checkbox"/></td>
			<td><input id="b" value="2" type="checkbox"/></td>
			<td><input id="c" value="3" type="checkbox"/></td>
			<td><input id="d" value="4" type="checkbox"/></td>
		</tr>
		<tr>
            <td><input id="w" value="5" type="checkbox"/></td>
			<td><input id="x" value="6" type="checkbox"/></td>
			<td><input id="y" value="7" type="checkbox"/></td>
			<td><input id="z" value="8" type="checkbox"/></td>
		</tr>
	</tbody>
</table>
<p></p>

CSS

body{font-family:Tahoma, Verdana;}
th{width:100px;text-align:left;font-weight:normal;text-transform: capitalize;}

JavaScript

$(function () {
    var keys = {}, // Keys strokes state
        storage = {}, // Values of checked checkboxes
        change = function(key, val, state) {
            if (state) {
                storage[key] = val;
            } else if(storage[key]){
                delete storage[key];
            }
        },
        container = $('tbody'), // first common checkboxes's ancestor selector
        storageConsole = $('body p'), // Where to display the storage content
        showOutput = function(){
            storageConsole.text(
                $.map(storage, function(el, i){return el;}).sort().join('/')
            );
        };

    $(document).keydown(function (e) {
        // Update key state
        keys['k' + e.which] = true;
        if (keys['k16']) {
            var way = (keys['k38'] ? 'prev' : (keys['k40'] ? 'next' : '')),
                method = (way == 'next' ? 'first' : 'last'),
                nextCb;
            if (way) {
                if (!$('input:checked', container).length) {
                    nextCb = $('input[type="checkbox"]', container)[method]();
                } else {
                    nextCb = container.find('input[type="checkbox"]:not(:checked)')[method]();
                }

                // Update checkbox state
                nextCb.prop('checked', !nextCb.prop('checked'));

                // Update values Storage
                change(nextCb.attr('id'), nextCb.val(), nextCb.prop('checked'));
                
                showOutput();
                e.preventDefault();
            }
        }
    }).keyup(function (e) {
        if (keys['k' + e.which]) {
            delete keys['k' + e.which];
        }
    }).click(function(e){
            var $e = $(e.target);
        if ($e.is('input[type="checkbox"]')) {
            change($e.attr('id'), $e.val(), $e.prop('checked'));
            showOutput();
        }
    });
});