如何选中/取消选中keyup上的复选框

时间:2016-06-01 15:17:53

标签: javascript function checkbox document keyup

我一直在尝试制作一个脚本,当我按下'c'键但检查并取消选中复选框但它不起作用。

$(document).keyup(function(e){
  if(e.which == 67){
    if($('#main').css('opacity') == 0) {
    if ($('#cHideChat').attr('checked')) {
    $('#cHideChat').prop('checked', false);
    }
    else {
    $('#cHideChat').prop('checked', true);
      }
    }
  }
});

3 个答案:

答案 0 :(得分:0)

你可以这样做

$(document).on('keyup', function(e) {
  var checkBox = $('#cHideChat')
  if ($('#main').css('opacity') == 0) {
    if (e.which == 67) checkBox.prop("checked", !checkBox.prop("checked"));
  }
});
#main {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="cHideChat">
<div id="main"></div>

答案 1 :(得分:0)

您需要检查prop,如此:

$(document).keyup(function(e){
  if(e.which == 67){
    if($('#main').css('opacity') == 0) {
    if ($('#cHideChat').prop('checked')) {  // check for prop, not attr
    $('#cHideChat').prop('checked', false);
    }
    else {
    $('#cHideChat').prop('checked', true);
      }
    }
  }
});

答案 2 :(得分:0)

我认为这个问题与jQuery没有关系。虽然Nenad和Sandeep提供了更好的方法来实现你想要的东西,但是jQuery代码应该运行良好。但是,我看到另外两个问题:

首先,密钥代码67对应于上层&#39; C&#39;因此您的代码不响应较低的&#39; c&#39;印刷机。低级&#39;的关键代码是99。 其次,没有属性&#34;已检查&#34;。它是一个属性,您应该通过.prop("checked")而不是.attr("checked")进行查询。后者返回undefined,对应false,您的条件永远不会满足。所以只需按照Nenad Vracar的建议编辑代码,但请务必检查代码99,如下所示:

if (e.which == 67 || e.which == 99) {
    checkBox.prop("checked", !checkBox.prop("checked"));
}