Hit tecla Enter para comprobar o seleccionar la casilla de verificación

Newbie- que quiero hacer 2 cosas con estas casillas:Hit tecla Enter para comprobar o seleccionar la casilla de verificación

Uso TAB clave para desplazarse por las opciones, esta parte funciona
Mientras TAB a través de opciones, quiero golpear ENTER tecla para seleccionar la casilla de verificación que, esta parte no está funcionando

a continuación se muestra el código de ejemplo. Estoy usando las casillas de verificación como un grupo.

¿Alguien tiene alguna sugerencia?

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

Fuente

2012-09-13 Steve42

¿Espacio de prensado no es una opción? Si no, intente usar el evento 'keydown' en lugar de' keypress'. –

, observe que las casillas de verificación se pueden seleccionar con Espacio. https://stackoverflow.com/a/35423812/1343917 –

probar este código

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

Fuente

2012-09-13 13:13:44 yoku2010

En primer lugar, se está perdiendo un soporte antes de la etiqueta form.

En segundo lugar, se olvidó de hecho activar la casilla de verificación del teclado:

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

Working Fiddle here.

Fuente

2012-09-13 13:05:01 vzwick

he encontrado la solución recomendada para ser demasiado hinchado. esto funciona mejor

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

Fuente

2015-04-20 13:57:22 r3wt

perfecto, bueno, gracias – Chetan

Hit tecla Enter para comprobar o seleccionar la casilla de verificación

Respuesta

Cuestiones relacionadas