Question

我有几个复选框，我需要使用回车键而不是空格键选择它时有焦点。我有下面的代码适用于一个复选框，但我需要多个复选框。我知道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>

`

Answer 1

听起来你正试图在所有复选框上使用它？在这种情况下，请使用$( ":checkbox" )代替$('#mycheckbox')

Answer 2

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

$('input[type=checkbox]')

这将返回所有类型复选框的输入。另一种方法是给出你对类感兴趣的所有复选框，然后匹配类 - 我也提出了这种方法，以防你不想将它应用于所有类。所以HTML：

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

然后是jquery选择器：

$('.support-enter')

Answer 3

您必须改为使用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>

Answer 4

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

Answer 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

Answer 6

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

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

选择复选框并输入密钥

7 个答案: