Jquery 按Enter键选中或选中复选框_Jquery_Forms_Checkbox_Enter

Jquery 按Enter键选中或选中复选框

jquery forms checkbox

Jquery 按Enter键选中或选中复选框,jquery,forms,checkbox,enter,Jquery,Forms,Checkbox,Enter,新手-我想用这些复选框做两件事：使用TAB键通过选项进行TAB，此零件工作正常当我在选项中单击TAB键时，我想按ENTER键选择该复选框，该部件不工作下面是示例代码。我将复选框作为一个组使用。有人有什么建议吗 <!doctype html> <head> <title>test Radio buttons checkbox</title> <script type="text/javascrip

新手-我想用这些复选框做两件事：

使用TAB键通过选项进行TAB，此零件工作正常

当我在选项中单击TAB键时，我想按ENTER键选择该复选框，该部件不工作

下面是示例代码。我将复选框作为一个组使用。

有人有什么建议吗

<!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>


测试单选按钮复选框
$（文档）.ready（函数（）{
$（'input:checkbox[name=Colors]'）。按键（函数（事件）{
var keycode=（event.keycode？event.keycode:event.which）；
如果（键代码==13）{
复选框到单选按钮（此）；
警报（“按下回车键”）；
}   
event.stopPropagation（）；
});
$（'input:checkbox[name=Colors]'）。单击（函数（）{
复选框到单选按钮（此）；
});
});
功能复选框到单选按钮（框）{
$（'input:checkbox[name='+box.name+']'）。每个（函数（）{
如果（此！=框）
$（this.attr（'checked'，false）；
});
}
测试单选按钮复选框


红色

蓝色

绿色

黄色

首先，在

表单

标记前缺少一个括号

其次，您忘记实际激活按键上的复选框：

if (keycode == 13) {
    $(this).attr('checked', checked); // << this line!
    Checkbox_to_RadioButton(this);
    alert("Enter key was pressed");
}

if（keycode==13）{
$（this.attr（'checked'，checked）；//试试这段代码
<!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>


测试单选按钮复选框
$（文档）.ready（函数（）{
$（'input:checkbox[name=Colors]'）。按键（函数（事件）{
var keycode=（event.keycode？event.keycode:event.which）；
如果（键代码==13）{
复选框至单选按钮（此“输入”）；
}   
event.stopPropagation（）；
});
$（'input:checkbox[name=Colors]'）。单击（函数（）{
复选框到单选按钮（此“单击”）；
});
});
功能复选框到单选按钮（框，myEvent）{
如果（myEvent==“输入”）
{
变量$box=$（box）；
如果（$box.attr（'checked'））
$box.attr（'checked'，false）；
其他的
$box.attr（'checked'，true）；
}
$（'input:checkbox[name='+box.name+']'）。每个（函数（）{
如果（此！=框）
$（this.attr（'checked'，false）；
});
}
测试单选按钮复选框


红色

蓝色

绿色

黄色



我发现推荐的解决方案过于臃肿。这样效果更好
$('input:checkbox').keypress(function(e){
    if((e.keyCode ? e.keyCode : e.which) == 13){
        $(this).trigger('click');
    }
});

r3wt的方法工作得很好，但我注意到在我的表单上，按下Enter
也会提交表单或执行其他不需要的操作。添加e.preventDefault（）；
可防止在复选框上按Enter键时出现默认浏览器操作
$('input:checkbox').keypress(function(e){
    e.preventDefault();
    if((e.keyCode ? e.keyCode : e.which) == 13){
        $(this).trigger('click');
    }
});

按空格键不是一个选项？如果不是，请尝试使用keydown
事件而不是keypress
。请注意，复选框可以用空格键选择。