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

Question

我一直在尝试制作一个脚本，当我按下'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);
}
}
}
});

Answer 1

您需要检查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);
}
}
}
});

Answer 2

你可以这样做

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

Answer 3

我认为这个问题与jQuery无关。尽管Nenad和Sandeep提供了更好的方法来实现您想要的，但jQuery代码应该运行良好。然而，我看到了另外两个问题：

首先，键代码67对应于上部的"C"，因此您的代码不会对下部的"C"按压做出响应。下'c'的键代码是99。其次，不存在"已检查"的属性。它是一个属性，您应该通过.prop("checked")而不是.attr("checked")来查询它。后者返回对应于false的undefined，并且您的条件永远不满足。因此，只需按照Nenad Vracar的建议编辑您的代码，但请确保检查密钥代码99，如下所示：

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