使用回车键选择复选框答案

【问题标题】：select checkbox with enter key使用回车键选择复选框
【发布时间】：2017-07-07 13:31:35
【问题描述】：

我有几个复选框需要在获得焦点时使用回车键而不是空格键进行选择。我有下面的代码适用于一个复选框，但我需要多个复选框。我知道 id 标签需要是唯一的，但我不知道该怎么做。

    $(document).ready(function () {
    $('#mycheckbox').on('keypress', function (event) {
        if (event.which === 13) {
            this.checked = !this.checked;
        }
    });
});

<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">My text<br>

我正试图让它在所有复选框上工作，而不仅仅是具有 mycheckbox id 的复选框。

到目前为止，这是我的完整代码：

`

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-

latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('input:checkbox').on('keypress', function (event) {
        if (event.which === 13) {
            $(this).prop('checked', !$(this).prop('checked'));
        }
    });
});
</script>

</head>
<body>

<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></

script>
<textarea class="textfield" id="form1" name="form1">My text 

here</textarea>
<div class="taglist">
  <label><input type="checkbox" value="Value 1">Value 1</label>
  <label><input type="checkbox" value="Value 2">Value 2</label>
  <label><input type="checkbox" value="Value 3">Value 3</label>
  <label><input type="checkbox" value="Value 4">Value 4</label>
  <label><input type="checkbox" value="Value 5">Value 5</label>
</div>
<script type="text/javascript">
function updateTextArea() {
  var allVals = $('#form1').data('initialVal'),
      lineCount = 1;
  $('.taglist :checked').each(function(i) {
    allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val

();
    lineCount++;
  });
  $('#form1').val(allVals).attr('rows', lineCount);

}
$(function() {
  $('.taglist input').click(updateTextArea);

  $('#form1').data('initialVal', $('#form1').val());
  updateTextArea();
});
</script>

</body>
</html>

`

【问题讨论】：

请发布您正在使用的 HTML。
@Greg - 单击复选框时，您正在更新文本区域。最好使用change 事件，例如$('.taglist input').change(updateTextArea);。然后在您以编程方式选中一个框后立即触发更改事件，方法是调用$(this).change();。
很棒，效果很好。我很感激每个人都花时间在这上面。非常感谢！！！！
请注意，您可以选择带有空格stackoverflow.com/a/35423812/1343917的复选框

标签： javascript jquery html events checkbox

【解决方案1】：

听起来你正试图让它在所有复选框上工作？在这种情况下使用$( ":checkbox" ) 而不是$('#mycheckbox')

【讨论】：

明白了。非常感谢。你们真快！！！！谢谢大家的帮助。
明白了。非常感谢。你们真快！！！！感谢大家的帮助。不过我确实有问题。我正在使用复选框将其值发送到文本区域。如果我单击鼠标，它会很好用。 enter 键现在选择复选框，但值没有传递到 textarea。
@Greg，看看我的回答。
为了获得更好的性能，JQuery documentation 建议您使用input:checkbox，而不仅仅是:checkbox。这是因为:checkbox 等价于*:checkbox。
@Greg，以编程方式检查复选框不会触发其更改事件，但您可以通过调用 $(this).change();（$(this).trigger('change 的缩写）来实现；`。（我希望你使用的是change-event而不是click-event。如果没有，你应该切换。）

【解决方案2】：

您必须改用classes。

<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>

jQuery

$('.mycheckbox').on('keypress', function (event) {
    if (event.which === 13) {
        $(this).prop('checked', !$(this).prop('checked'));
    }
});

另一种方法是使用 selector 类型来获取特定类型的 input 元素。

$('input[type=checkbox]')

$(':checkbox').on('keypress', function (event) {
    if (event.which === 13) {
        $(this).prop('checked', !$(this).prop('checked'));
        $('textarea').html($(this).prop('checked').toString());
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>
<textarea></textarea>

【讨论】：

我不是反对者，但是当我们可以访问:checkbox 的伪类选择器时，你为什么要创建一个类？

【解决方案3】：

$(document).on('keypress', function(event) {
  if (event.keyCode == 13) {
    $('#mycheckbox').prop('checked', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">

【讨论】：

【解决方案4】：

或者您可以使用类选择器而不是 id 选择器。只需在您的复选框中添加一些类即可。

【讨论】：

【解决方案5】：

您可以使用input[type="checkbox"] 或为每个复选框添加一个类，是的，ID 必须是唯一的：

$(document).ready(function() {
  $('input[type="checkbox"]').on('keypress', function(event) {
    if (event.which === 13) {
      this.checked = !this.checked;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox1">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox2">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox3">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox4">My text

【讨论】：

【解决方案6】：

使用attribute-equal selector 获取checkbox 类型的输入，如下所示：

$(document).ready(function() {
  $('input[type = "checkbox"]').on('keypress', function(event) {
    if (event.which === 13) {
      this.checked = !this.checked;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike">My text<br>
<input type="checkbox" name="Colors" value="Bike">Other text<br>

【讨论】：

【解决方案7】：

更改选择器应该可以解决问题：

$('input[type=checkbox]')

这将返回复选框类型的所有输入。另一种方法是提供您对某个类感兴趣的所有复选框，然后匹配该类 - 我也建议使用这种方法，以防您不想将其应用于所有这些复选框。所以HTML：

<input type="checkbox" class="support-enter" />

然后是jquery选择器：

$('.support-enter')

【讨论】：