Hit tasto Invio per controllare o selezionare casella

Newbie- voglio fare 2 cose con queste caselle di controllo:Hit tasto Invio per controllare o selezionare casella

Usa TAB chiave alla scheda attraverso le opzioni, questa parte funziona
Come ho TAB attraverso le opzioni, voglio colpire ENTER tasto per selezionare la casella di controllo che, questa parte non sta funzionando

di seguito è riportato il codice di esempio. Sto usando le checkbox come gruppo.

Qualcuno ha qualche suggerimento?

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

fonte

2012-09-13 Steve42

La pressione dello spazio non è un'opzione? Altrimenti, prova a utilizzare l'evento 'keydown' invece di' keypress'. –

è sufficiente notare che le caselle di controllo possono essere selezionate con Spazio. https://stackoverflow.com/a/35423812/1343917 –

provare questo codice

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

fonte

2012-09-13 13:13:44 yoku2010

Prima di tutto, vi state perdendo una staffa prima del tag form.

In secondo luogo, si è dimenticato di attivare la casella di controllo in realtà sulla pressione dei tasti:

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

Working Fiddle here.

fonte

2012-09-13 13:05:01 vzwick

ho trovato la soluzione consigliata per essere troppo gonfio. questo funziona meglio

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

fonte

2015-04-20 13:57:22 r3wt

perfetto, ottimo, grazie – Chetan

Hit tasto Invio per controllare o selezionare casella

risposta

Problemi correlati