All geek questions in one place

Press the Enter key to check or select the check box

Newbie. I want to do 2 things with these checkboxes:

  • Use the TAB key to scroll through the tabs, this part works
  • As I TAB through the parameters, I want to press the ENTER key to set this checkbox, this part does NOT work

The following is sample code. I use checkboxes as a group.

Does anyone 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>
+6
source share
3 answers

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>
+4
source

I found the recommended solution too bloated. it works better

 $('input:checkbox').keypress(function(e){ if((e.keyCode ? e.keyCode : e.which) == 13){ $(this).trigger('click'); } });
+8
source

First of all, you are missing the parenthesis before the form tag.

Secondly, you forgot to activate the checkbox when you press the key:

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

The working script is here.

0
source

Source: https://habr.com/ru/post/925312/

More articles:


All Articles