新手 – 我想用这些复选框做两件事:
>使用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>
解决方法
试试这个代码
<!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>
原文地址:https://www.jb51.cc/jquery/178694.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。