0
I’m trying to add keyboard shortcuts to select radio buttons, but it’s not working I don’t know if the error is in the code or I’m making some wrong reference to some bootstrap element. Could someone help me?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title> FREQUE </title>
<!--css's-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script type="text/javascript">
//espera o documento carregar para executar o que nós queremos
window.onload = function()
{
//no lugar do document, podemos utilizar qualquer outro elemento, mas utilizando o document podemos capturar o que o usuario digitar em qualquer lugar do documento
document.onkeyup = function(e)
{
//o "e" contém os dados do evento que foram disparados quando você apertou um botao do teu teclado
console.log(e.keyCode);//para saber qual o codigo do botão que foi apertado
/*
A : código 65
B : código 66
C : código 67
D : código 68
E : código 69
F : código 70
V : código 86
*/
//pronto, ja sabemos quais são os codigos necessários
var elemento = null;//variavel que segura o elemento que vamos pegar
switch(e.which)
{
case 65 :
// 1 checkbox
elemento = document.getElementById('A');
break;
case 66 :
// 1 checkbox
elemento = document.getElementById('B');
break;
case 67 :
// 1 checkbox
elemento = document.getElementById('C');
break;
case 68 :
// 2 checkbox
elemento = document.getElementById('D');
break;
case 69 :
// 3 checkbox
elemento = document.getElementById('E');
break;
case 70 :
// 4 checkbox
elemento = document.getElementById('F');
break;
case 86 :
// 4 checkbox
elemento = document.getElementById('V');
break;
default :
//caso a tecla não seja a que nós queremos
return false;//para o script e espera o proximo botão que o usuário apertar
break;
}
//aqui ja temos o elemento, vamos ver se ele ja esta selecionado ou não
//eu só não entendi se vc quer habilitar/desabilitar ou selecionar/descelecionar o elemento, vou supor que seja selecionar/descelecionar
if(elemento.checked)
{
//elemento está selecionado, vamos desceleciona-lo
elemento.checked = false;
}
else
{
//elemento não está selecionado, vamos seleciona-lo
elemento.checked = true;
}
}
}
</script
</head>
<body>
<div class="container">
<div class="col-md-6">
<div>
</br>
(FCC- Procurador do Estado - MT/ 2011) De acordo com a Constituição Federal, a atuação do Estado no dominio econômico
a) restringe-se à atividade regulatória, vedada, em qualquer hipótese, a exploração direta de atividade econômica em regime de competição com o privado.
b) engloba a atividade regulatória, fiscalizadora e de fomento, vedada a exploração direta de atividade comercial ou industrial.
c) é exercida em caráter excepcional, restringindo-se às atividades que envolvam a s~gurança nacional.
d) restringe-se à função normativa, reguladora e fiscalizadora e, apenas nos casos de relevante interesse coletivo, à atividade de incentivo e planejamento.
e) contempla, também, a exploração direta de atividade econômica, quando necessária aos imperativos da segurança nacional ou a relevante interesse coletivo, conforme definidos em lei.
</br>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" checked="" name="options" id="A" autocomplete="off"> A
</label>
<label class="btn btn-primary">
<input type="radio" checked="" name="options" id="B" autocomplete="off"> B
</label>
<label class="btn btn-primary">
<input type="radio" checked="" name="options" id="C" autocomplete="off"> C
</label>
<label class="btn btn-primary">
<input type="radio" checked="" name="options" id="D" autocomplete="off"> D
</label>
<label class="btn btn-primary">
<input type="radio" checked="" name="options" id="E" autocomplete="off"> E
</label>
</div>
</br>
</br>
<a href="#" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">Responder</a>
<a href="#" class="btn btn-primary btn-sm " role="button" ><<</a>
<a href="#" class="btn btn-primary btn-sm " role="button" aria-pressed="true"><</a>
<a href="#" class="btn btn-primary btn-sm " role="button" aria-pressed="true">></a>
<a href="#" class="btn btn-primary btn-sm " role="button" aria-pressed="true">>></a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--<script type="text/javascript" src="atalhos.js"></script>-->
</body>
</html>
Thank you