Develop Reference

To let the user check/unchecked the checkbox using keyboard

I have a HTML page where I have few checkboxes which look Iike radio buttons, i want the user to be able to check/uncheck the checkboxes using the keyboard?what should I include to achieve this functionality, I have been using aria attributes in my code but still not able to achieve it!

This will do the trick for any key pressed. You may want to add checking a specfic keycode on the event:
$(function(){
$('[type=checkbox]').keypress(function(e){
$(this).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />

document.getElementById('focused').focus();
<input type="checkbox" id="focused">Hit space

Jquery checkbox function backwards

Quick question. Can anyone tell me why this function is working backwards? For example, when I check it, it unchecks all of my checkboxes and when I uncheck it, it checks all of checkboxes.
The function was working fine until I added the .click() method at the end. However I need this so that the boxes call the function when clicked. Any help is appreciated!
Jquery:
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked).click();
});
HTML Master Checkbox:
<div id="masterButton">
<input type="checkbox" id="checkAll" checked>Check/UnCheck All<br>
</div>
HTML All other checkboxes:
<input id="bus0" type="checkbox" value="0">

You want to click all the checkboxes that are not checked the same as your primary checkbox. So just add a ! and you're fine:
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', !this.checked).click();
});

Two Checkboxes Being Checked at the Same Time

I have two checkboxes. What I need is when someone checks one of the boxes, it will automatically check the other one as well. And vice versa, if someone unchecks one of the boxes, it unchecks both. This is a bundle package on the form and they can not get one without the other.
<input type="checkbox" id="chk1" name="chk1" value="100">Voicemail<br />
<input type="checkbox" id="chk2" name="chk2" value="50">VM Support
Any help is greatly appreciated!

Why not this?
<input type="checkbox" id="chk1" name="chk1" value="100">
<label for="chk1">Voicemail and VM Support</label>

Assuming you want to only test these two checkboxes (and not every one on the page), you can use a jQuery Multiple Selector to access the onClick event for both. Using this you can test the checked status of the checkbox that was just clicked, and then assign that status of both checkboxes to match the one that was just clicked.
$('#chk1, #chk2').on('click', function(){
var checked = $(this).is(':checked');
$('#chk1, #chk2').attr('checked', checked);
});

Try this
$('#chk1 , #chk2').on('click', function(){
$('#chk1 , #chk2').attr('checked', $(this).is(':checked'))
});
FIDDLE
FIDDLE

Avoiding radio input getting focus when an input element in its label is selected in Firefox

I have read this question and I am having the same problem:
Put text input inside label for radio button?
Feel free to take a look using Firefox (Chrome and IE8 do not have this problem.):
http://pastehtml.com/view/1dbqqb3.html
I now understand some javascript has to be used to fix this behavior in Firefox.
But I have no idea how to write this piece of codes.
Thanks in advance.

Some html:
<input id="radio1" type="radio" />
<input id="text1" onfocus="selectRadioBtn('radio1')" />
The JavaScript:
function selectRadioBtn(id)
{
document.getElementById(id).checked = true;
}

HTML checkbox onclick called in Javascript

I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.

How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.

Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>

You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>

jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.