jquery 用回车键选择复选框

ntjbwcob 于 12个月前发布在 jQuery

关注(0)|答案(8)|浏览(143)

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

型
`

jquery

来源：https://stackoverflow.com/questions/42307821/select-checkbox-with-enter-key

8条答案

按热度按时间

5vf7fwbs1#

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

赞(0）回复(0）举报 12个月前

xiozqbni2#

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

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

个字符

赞(0）回复(0）举报 12个月前

wz3gfoph3#

改变选择器应该可以做到这一点：

$('input[type=checkbox]')

字符串
这将返回所有类型为checkbox的输入。另一种方法是给予所有你感兴趣的复选框，然后匹配这个类-我也建议过这种方法，以防你不想把它应用到所有的复选框上。所以HTML：

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

型
jquery选择器：

$('.support-enter')

型

赞(0）回复(0）举报 12个月前

bzzcjhmw4#

或者你可以使用类选择器代替id选择器。只要在你的复选框中添加一些类。

赞(0）回复(0）举报 12个月前

yc0p9oo05#

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

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

个字符

赞(0）回复(0）举报 12个月前

1rhkuytd6#

你必须使用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）回复(0）举报 12个月前

s6fujrry7#

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

个字符

赞(0）回复(0）举报 12个月前

oalqel3c8#

这里是使用回车键选择复选框输入的代码

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;
  }
});

字符串

赞(0）回复(0）举报 12个月前

我来回答

jquery 用回车键选择复选框

8条答案

相关问题

热门标签

最新问答