javascrpit复选框怎么用键盘来代替鼠标的点击事件 50C

这是复选框
图片说明
这是复选框的代码
图片说明
鼠标勾选太麻烦,怎么才能用键盘的数字键绑定各个元素,比如点数字键一就选第一个元素素,最好直接用js的代码,可以直接在chrome的控制台输入就可以使用的。
本人不懂js,感谢各位大佬

9个回答

不需要任何代码,选中了按下空格就能选中。

caozhy
贵阳老马马善福专门编写代码的老马就是我! 建议采纳。
接近 2 年之前 回复
caozhy
贵阳老马马善福专门编写代码的老马就是我! 这是正解。不需要借助鼠标。
接近 2 年之前 回复
m0_37928829
Forsaken12345 我的意思是怎么不借助于鼠标去实现复选框的选择
接近 2 年之前 回复

不需要任何代码,获得焦点了按下空格就能选中。

devmiao
见了你女王大人喵姐还不跪下 回复Forsaken12345: 按下tab选中,得到焦点
接近 2 年之前 回复
m0_37928829
Forsaken12345 如果没有焦点呢?
接近 2 年之前 回复

html代码

 <input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">

keydown() 键盘按下触发事件

这个实现起来太简单了,给你个思路,键盘事件都有对应的号码,一般使用上下键和回车键即可实现,在页面首先点击上键或下键时候分别让li的最后一个或第一个背景色变化,当按下回车键时候选中此li中 的选项 真正实现起来也很简单的 都不超过十行代码

注意引入jquery文件时的路径如,
jquery代码如下:
$(document).ready(function() {
$('html').keydown(function(event) {
if (event.which >= 49 && event.which <= 57) {
$num = event.which - 49;
$('input[name=check]:eq(' + $num + ')').prop("checked")?$('input[name=check]:eq(' + $num + ')').prop("checked",false):$('input[name=check]:eq(' + $num + ')').prop("checked",true);
}
})
});
按一次选中,再按一次取消选中,支持1-9

可以使用TAB来控制焦点,用空格键来选中或取消选中

按TAB切换焦点 按空格就能选中

使用jquery实现.亲测有效。
html代码如下:




注意引入jquery文件时的路径如,
jquery代码如下:
$(document).ready(function() {
$('html').keydown(function(event) {
if (event.which >= 49 && event.which <= 57) {
$num = event.which - 49;
$('input[name=check]:eq(' + $num + ')').prop("checked")?$('input[name=check]:eq(' + $num + ')').prop("checked",false):$('input[name=check]:eq(' + $num + ')').prop("checked",true);
}
})
});
按一次选中,再按一次取消选中,支持1-9

m0_37928829
Forsaken12345 这不是我的网站,怎么在chrome的控制台使用
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!