在 JQuery 中的 CheckBox 上输入按键事件

Question

我是 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);

        }

Answer 1

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

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

$(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 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 上输入按键事件

Enter Key Event on CheckBox in JQuery

javascript

jquery

jquery-events