i want my code to be work as when i press arrowkey at checkbox 4, it should focus the submit button element in the next div. but now it is focusing the first checkbox.How to modify it?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div>
<input type="checkbox" autofocus/>1
<input type="checkbox" />2
<input type="checkbox" />3
<input type="checkbox" />4
<br/>
<input type="button" value="mycheckbox">
<input type="button" value="mycheckbox">
</div>
<script>
$(document).ready(function () {
$('input').keydown(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
clickCheckBox(this);
}
if (keycode == 39) {
if($(this).nextAll('input').length === 0) {
$('input:enabled:first').focus();// first textbox
}
else
{
$(this).nextAll('input:first').focus();
}
}
if (keycode ==37) {
if($(this).prevAll('input').length === 0) {
$('input:enabled:last').focus();
}
else
$(this).prevAll('input:first').focus();
}
event.stopPropagation();
});
});
function clickCheckBox(box) {
var $box = $(box);
$box.prop('checked',!$box.prop('checked'));
}
</script>
</body>
</html>