I use tags related to checkbox tabs in my html extensively. It allows the user to click on a wide label and get what he wants - a checkmark switch. I want to achieve a similar behavior by clicking Spaceto toggle the checkbox, focusing on the label. To make the shortcut bright, I add tabindex="0"to the shortcuts. I also don't want the checkboxes to be focused, so I add tabindex="-1"to the inputs.
Here are two examples: one uses label label packaging, the other uses an attribute for.
<input type="button" value="Click then press tab." /><br/>
<label tabindex="0">Accept terms <input type="checkbox" tabindex="-1"/></label><br/>
<label for="MyCheckbox" tabindex="0">Accept terms</label> <input type="checkbox" id="MyCheckbox" tabindex="-1"/>
I'm interested in the ability to achieve the desired behavior without javascript.