Hit Enter key to Check or select checkbox
Try this code
<!doctype html>
<html>
<head>
<title>test Radio buttons checkbox</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input:checkbox[name=Colors]').keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
Checkbox_to_RadioButton(this,"enter");
}
event.stopPropagation();
});
$('input:checkbox[name=Colors]').click(function(){
Checkbox_to_RadioButton(this,"click");
});
});
function Checkbox_to_RadioButton(box,myEvent){
if(myEvent == "enter")
{
var $box = $(box);
if($box.attr('checked'))
$box.attr('checked',false);
else
$box.attr('checked',true);
}
$('input:checkbox[name=' + box.name + ']').each(function(){
if (this != box)
$(this).attr('checked', false);
});
}
</script>
</head>
<body>
<h1>test Radio buttons checkbox</h1>
<form name="form1">
<input type="text" id="dname" name="dname"><br>
<input type="checkbox" id="Colors" name="Colors" value="Red" />Red<br />
<input type="checkbox" id="Colors" name="Colors" value="Blue" />Blue<br />
<input type="checkbox" id="Colors" name="Colors" value="Green" />Green<br />
<input type="checkbox" id="Colors" name="Colors" value="Yellow" />Yellow<br />
<br>
</form>
</body>
</html>
I found the recommended solution to be too bloated. this works better
$('input:checkbox').keypress(function(e){
if((e.keyCode ? e.keyCode : e.which) == 13){
$(this).trigger('click');
}
});
r3wt's approach works beautifully, but I noticed on my forms that pressing Enter
would also submit the form or otherwise do something else unwanted. Adding e.preventDefault();
prevents the default browser action when pressing enter on the checkbox.
$('input:checkbox').keypress(function(e){
e.preventDefault();
if((e.keyCode ? e.keyCode : e.which) == 13){
$(this).trigger('click');
}
});