jQuery 按 Enter 键检查或选择复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12406321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hit Enter key to Check or select checkbox
提问by Steve42
Newbie- I want to do 2 things with these checkboxes:
新手 - 我想用这些复选框做两件事：
- Use TABkey to tab through options, this part works
- As I TABthrough options, I want to hit ENTERkey to select that check box, this part is NOT working
- 使用TAB键切换选项，这部分有效
- 当我TAB通过选项时，我想点击ENTER键来选择那个复选框，这部分不起作用
Below is sample code. I am using the checkboxes as a group.
下面是示例代码。我将复选框作为一个组使用。
Does any one have any suggestions?
有没有人有什么建议？
<!doctype 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);
alert("Enter key was pressed");
}
event.stopPropagation();
});
$('input:checkbox[name=Colors]').click(function(){
Checkbox_to_RadioButton(this);
});
});
function Checkbox_to_RadioButton(box){
$('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>
采纳答案by yoku2010
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>
回答by r3wt
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');
}
});
回答by rogi
r3wt's approach works beautifully, but I noticed on my forms that pressing Enterwould also submit the form or otherwise do something else unwanted. Adding e.preventDefault();prevents the default browser action when pressing enter on the checkbox.
r3wt 的方法效果很好，但我注意到在我的表单上按下Enter也会提交表单或以其他方式做其他不需要的事情。e.preventDefault();在复选框上按回车键时，添加可防止默认浏览器操作。
$('input:checkbox').keypress(function(e){
e.preventDefault();
if((e.keyCode ? e.keyCode : e.which) == 13){
$(this).trigger('click');
}
});
回答by vzwick
First of all, you're missing a bracket before the formtag.
首先，您在form标签前缺少一个括号。
Second, you forgot to actually activate the checkbox on keypress:
其次，您忘记实际激活按键上的复选框：
if (keycode == 13) {
$(this).attr('checked', checked); // << this line!
Checkbox_to_RadioButton(this);
alert("Enter key was pressed");
}
