命中Enter鍵選擇複選框

Newbie-我想要做的兩件事情與這些複選框：通過選擇命中Enter鍵選擇複選框

使用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>

來源

2012-09-13 Steve42

按下空間不是一個選項？如果不是，請嘗試使用'keydown'事件而不是'keypress'。 –

只需注意可以使用空格選擇複選框。 https://stackoverflow.com/a/35423812/1343917 –

試試這個代碼

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

來源

2012-09-13 13:13:44 yoku2010

首先，您在form標記前缺少一個括號。

其次，你忘了真正激活複選框上的按鍵：

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

Working Fiddle here.

來源

2012-09-13 13:05:01 vzwick

我找到了推薦的解決方案過於臃腫。這個效果更好

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

來源

2015-04-20 13:57:22 r3wt

完美，很好，謝謝 – Chetan

命中Enter鍵選擇複選框

回答

相關問題