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

Enter Key Event on CheckBox in JQuery

本文关键字：输入 事件 复选框 JQuery      更新时间：2023-09-26

我是jquery实现的新手。我需要在id="mycheckbox"复选框上应用输入键事件，以便每当我按回车键复选框时，都应该选择它。到目前为止，我尝试过的方法如下，但似乎不起作用。任何建议都非常受欢迎。

 $(document).ready(function(){
            $('input:checkbox[id=mycheckbox]').keypress(function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                alert('keycode='+keycode+' pressed.');
                if (keycode == 13) {
                    clickCheckBox(this);
                }   
                event.stopPropagation();
            });
            $('input:checkbox[id=mycheckbox]').click(function(){
                clickCheckBox(this);
            });
        });
        function clickCheckBox(box){
                var $box = $(box);
                if($box.attr('checked'))
                    $box.attr('checked',false);
                else
                    $box.attr('checked',true);
        }
如果我

正确理解您的要求，请检查此

$(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);
}
删除了

点击事件（你不需要它）并稍微修改了代码（使用prop而不是attr）。

$(document).ready(function() {
     $('#mycheckbox').keypress(function(event) {
         var keycode = (event.keyCode ? event.keyCode : event.which);
         if (keycode == 13) {
             clickCheckBox(this);
         }
         event.stopPropagation();
     });
 });
 function clickCheckBox(box) {
     var $box = $(box);
     $box.prop('checked', !$box.prop('checked'));
 }

为此创建了JSFIDDLE并且工作正常。

http://jsfiddle.net/c2S5d/23/

此代码有效，在Chrome 30上进行了测试

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

小提琴：

这里的代码有问题 

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

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

我在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 中寻求相同解决方案的人......

相关文章：