Manipulação de input type radio com Javascript

HTML

JavaScript

PHP

15/10/2020

Bom dia a todos.

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

Carlos Massam

Curtidas 0

Respostas

Carlos Massam

Carlos Massam

15/10/2020

Já consegui resolver. Obrigado!
GOSTEI 0
Rafael Santana

Rafael Santana

15/10/2020

Bom dia a todos.

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) };
GOSTEI 0
POSTAR