Javascript 在JQuery中的复选框中输入关键事件_Javascript_Jquery_Jquery Events

Javascript 在JQuery中的复选框中输入关键事件

javascript jquery

Javascript 在JQuery中的复选框中输入关键事件,javascript,jquery,jquery-events,Javascript,Jquery,Jquery Events,我是jquery实现的新手。。我需要对带有id=“mycheckbox”的复选框应用enter键事件，这样每当我按下复选框上的enter键时，它都应该被选中。到目前为止，我已经尝试了以下内容，但它似乎不起作用。任何建议都是非常宝贵的 $（文档）.ready（函数（）{ $（'input:checkbox[id=mycheckbox]'）。按键（函数（事件）{ var keycode=（event.keycode？event.keycode:event.which）；警报（'keycode='

我是jquery实现的新手。。我需要对带有id=“mycheckbox”的复选框应用enter键事件，这样每当我按下复选框上的enter键时，它都应该被选中。到目前为止，我已经尝试了以下内容，但它似乎不起作用。任何建议都是非常宝贵的

$（文档）.ready（函数（）{
$（'input:checkbox[id=mycheckbox]'）。按键（函数（事件）{
var keycode=（event.keycode？event.keycode:event.which）；
警报（'keycode='+keycode+'pressed'）；
如果（键代码==13）{
单击复选框（此）；
}   
event.stopPropagation（）；
});
$（'input:checkbox[id=mycheckbox]'）。单击（function（）{
单击复选框（此）；
});
});
功能点击复选框（框）{
变量$box=$（box）；
如果（$box.attr（'checked'））
$box.attr（'checked'，false）；
其他的
$box.attr（'选中'，true）；
}

：

这里的代码有问题

  function clickCheckBox(box){

            var $box = $(box);
            if($box.attr('checked'))
                $box.attr('checked',false);
            else
                $box.attr('checked',true);

    }

.attr（）

不接受布尔值。如果您使用的是jQuery 1.6或更高版本，请选择

prop（）

，该代码在Chrome30上测试有效

<html>
<body>
<input type='checkbox' id='mycheckbox' />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
  $(document).ready(function(){
    $('#mycheckbox').keydown(function(ev){
      if(ev.keyCode == 13) $(ev.target).click(); 
    })
  });
</script>
</body>
</html>


$（文档）.ready（函数（）{
$（“#mycheckbox”）.keydown（函数（ev）{
如果（ev.keyCode==13）$（ev.target）。单击（）；
})
});

删除了click事件（您不需要它）并对代码进行了少量修改（使用了prop而不是attr）

为此创建了JSFIDLE，工作正常

如果我正确理解您的要求，请检查此项

$(document).ready(function () {
    $('input:checkbox[id=mycheckbox]').keypress(function (event) {
        event.stopPropagation();
        var keycode = getKeyCodeFromEvent(event);
        if (keycode == 13) {
            clickCheckBox(this);
        }
    });
});

function clickCheckBox(box) {
   $(box).trigger('click');
}
function getKeyCodeFromEvent(event) {
   return (event.keyCode ? event.keyCode : event.which);
}

我在Angulajs中也需要同样的东西，并找到了解决方案。考虑到它可能会帮助其他人，因为对于Angular没有提出其他问题，我在这里分享我的代码：

angular.module('app', [])
.directive('input', function() {
  return {
    restrict: 'E', // Only search input element
    link: function(scope, elm, attr) {
      if (attr.type === 'checkbox') { //filtered out the checkbox only
        elm.on('keypress', function(event){
         if(event.keyCode === 13){
           event.preventDefault();
           elm.trigger('click');
           scope.$apply();
         }
       });
      }
    }
  };
});

希望它能帮助那些在AngularJS中寻求相同解决方案的人

请提供jsfiddle链接。您可以将

输入：checkbox[id=mycheckbox]

缩短为

#mycheckbox

似乎工作正常->@adeneo再次按下回车按钮将不会选中

复选框，我认为这就是问题所在。请记住：id（#）应该是唯一的！不要在多个元素上使用相同的ID！（我假设您在多个复选框上使用id）这将禁用通过单击来选中复选框的功能，因为触发（'click'）
。仔细查看您的代码；-）是的，它不需要单击函数更新它@empiricseems correct one，但停止传播需要在keycode检查中，if（keycode==13）{clickCheckBox（this）；event.stopPropagation（）；}。否则，像tabkey这样的其他键将无法工作。@HussainKMRBehestee感谢更新了很多Hanks@Devendra:）
angular.module('app', [])
.directive('input', function() {
  return {
    restrict: 'E', // Only search input element
    link: function(scope, elm, attr) {
      if (attr.type === 'checkbox') { //filtered out the checkbox only
        elm.on('keypress', function(event){
         if(event.keyCode === 13){
           event.preventDefault();
           elm.trigger('click');
           scope.$apply();
         }
       });
      }
    }
  };
});