Webpage with multiple check boxes

Question

I visit a webpage with multiple check boxes, each box has a his own name in front of it.

I am looking to check or un-check one box but I want to set shortcut keys for each box so instead use mouse or tab+space by its name.

How would it be possible?

Answer 1

To make a keyListener in javascript

<script type="text/javascript">
    $(document).bind('keyup', function(e) {
        arguments[0].key == 'Esc' // this is the pressed key
    });
</script>

Answer 2

There are already answers on JS-based solutions, so I'm not going to waste time on that part.

You can go with the HTML attribute accesskey , it's a JS-free solution, and accessibility-friendly.

For example, in following demo, press Alt + 1 with get the first checkbox checked, press the hotkey again with make it unchecked.

 <label accesskey="1"><input type="checkbox"> 1</label> <label accesskey="2"><input type="checkbox"> 2</label> <label accesskey="3"><input type="checkbox"> 3</label> <label accesskey="4"><input type="checkbox"> 4</label> <label accesskey="5"><input type="checkbox"> 5</label> 

Answer 3

What @jordi-castilla says, make a key listener. Map each key to an input.

For example:

<script type="text/javascript">
    $(document).bind('keyup', function(e) 
    {
        switch(e.keyCode)
        {
            case 49: // represents 1
                toggleCheckbox('name_of_checkbox');
                break;
            ...
        }
    });

    function toggleCheckbox(name)
    {
        var checkbox = $('input[name='+name+']');

        checkbox.attr('checked', !checkbox.attr('checked'));
    }
</script>

For keycodes check this link: Key Codes

-- EDIT --

You can also use the jQuery plugin Hotkeys:
https://github.com/jeresig/jquery.hotkeys

$(document).bind('keydown', 'ctrl+a', function() {  
     toggleCheckbox('name_of_checkbox');
});