Manipulação de input type radio com Javascript
15/10/2020
0
Bom dia a todos.
Eu tenho o seguinte código
Este código me apresenta 5 radiobutton distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbutton anteriores, e os radionbutton posteriores fossem "deschecado".
Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
Eu tenho o seguinte código
<input type="radio" id="radio01" name="radio01" value="radio01"> <input type="radio" id="radio02" name="radio02" value="radio02"> <input type="radio" id="radio03" name="radio03" value="radio03"> <input type="radio" id="radio04" name="radio04" value="radio04"> <input type="radio" id="radio05" name="radio05" value="radio05">
Este código me apresenta 5 radiobutton distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbutton anteriores, e os radionbutton posteriores fossem "deschecado".
Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
Carlos Massam
Curtir tópico
+ 0
Responder
Posts
29/10/2020
Rafael Santana
Bom dia a todos.
Eu tenho o seguinte código
Este código me apresenta 5 radiobutton distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbutton anteriores, e os radionbutton posteriores fossem "deschecado".
Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
Eu tenho o seguinte código
<input type="radio" id="radio01" name="radio01" value="radio01"> <input type="radio" id="radio02" name="radio02" value="radio02"> <input type="radio" id="radio03" name="radio03" value="radio03"> <input type="radio" id="radio04" name="radio04" value="radio04"> <input type="radio" id="radio05" name="radio05" value="radio05">
Este código me apresenta 5 radiobutton distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbutton anteriores, e os radionbutton posteriores fossem "deschecado".
Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
Olá tudo bom Carlos? Embora tenha conseguido resolver, pensei na lógica a seguir..
function checkRadios(val){
var radioValSubtrai = val;
var radioValSoma = val;
while(radioValSubtrai > 0){
radioValSubtrai = radioValSubtrai - 1;
var radioCheck = document.getElementById("radio0"+radioValSubtrai);
if( radioCheck !== null ){
radioCheck.checked = true;
}else{
break;
}
}
while(radioValSoma > 0){
radioValSoma = parseInt(radioValSoma) + 1;
var radioCheck = document.getElementById("radio0"+radioValSoma);
if( radioCheck !== null ){
radioCheck.checked = false;
}else{
break;
}
}
}
var radio01 = document.getElementById("radio01");
var radio02 = document.getElementById("radio02");
var radio03 = document.getElementById("radio03");
var radio04 = document.getElementById("radio04");
var radio05 = document.getElementById("radio05");
radio01.onclick = function(){ checkRadios(radio01.value) };
radio02.onclick = function(){ checkRadios(radio02.value) };
radio03.onclick = function(){ checkRadios(radio03.value) };
radio04.onclick = function(){ checkRadios(radio04.value) };
radio05.onclick = function(){ checkRadios(radio05.value) };
Responder
Clique aqui para fazer login e interagir na Comunidade :)
