用回车键选择复选框

问题描述 投票：0回答：8

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

`

javascript jquery html events checkbox
8个回答
3
投票

听起来您正试图让它适用于所有复选框？在这种情况下，请使用 

$( ":checkbox" )
而不是 
$('#mycheckbox')

3
投票

您可以使用 

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

3
投票

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

$('input[type=checkbox]')

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

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

然后是jquery选择器：

$('.support-enter')
1
投票

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

1
投票

使用 属性等于选择器 获取 

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>

1
投票

您必须使用 

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>

0
投票

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

0
投票

这是使用 Enter 键选择复选框输入的代码

const input = document.getElementById('tnc');

input.addEventListener("keypress", function(event) {
  if (event.key === "Enter" && tnc.checked == false) {
      tnc.checked = true;
  } else if(event.key === "Enter" && tnc.checked == true){
    tnc.checked = false;
  }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.