Question

我是jquery实现的新手..我需要在 id =“mycheckbox”的复选框上应用enter键事件，这样每当我按下复选框上的enter键时，都应该选中它。我到目前为止所尝试的是下面的内容，但它似乎无法正常工作。任何建议都很受欢迎。

 $(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);

        }

Answer 1

如果我理解你的要求，请检查这个

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

Answer 2

此代码可在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>

Answer 3

删除了点击事件（你不需要它）和修改后的代码（使用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/

Answer 4

FIDDLE：

您的代码存在问题

  function clickCheckBox(box){

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

    }

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

Answer 5

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

在JQuery中的CheckBox上输入Key Event

5 个答案: