How to select one radio through another?

Asked

Viewed 35 times

1

Let’s say I have 3 inputs of type 'radio' (A,B,C) and I have two other 'radio' (X,Z) At first the radios X,Z will be disabled and can only be self-selected if the radio B or C are clicked, and if I click the radio To, radios(X,Z) should return and be disabled again.

Follow the code as an example, to want to put all this in Javascrip (I do not know if there is another way, but my interest would be JS):

<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 1 </font></legend>
      <input type="radio" id ="rada" name="planoSaud" />A
      <input type="radio" id="radb" name="planoSaud" />B
      <input type="radio" id="radc" name="planoSaud" />C
   </fieldset> 
</FORM>
<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 2 </font></legend>
      <input type="radio" id ="radx" name="planoSaud" />X
      <input type="radio" id="radz" name="planoSaud" />Z
   </fieldset>
</FORM>

Thanks!

1 answer

1


You can add a eventListener to radios A, B and C. Add also disabled="disabled" to radios X and Y for them to load disabled:

var els = document.querySelectorAll("#rada, #radb, #radc");
for(x=0;x<els.length; x++){
   els[x].addEventListener("change", function() {

   if(this.id == 'rada'){
   }

   document.querySelector('#radx').disabled = document.querySelector('#radz').disabled = this.id == 'rada' ?
   true : false;

   if(this.id == 'rada'){
      document.querySelector('#radx').checked = document.querySelector('#radz').checked = false;
   }

  });
}
<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 1 </font></legend>
      <input type="radio" id ="rada" name="planoSaud" />A
      <input type="radio" id="radb" name="planoSaud" />B
      <input type="radio" id="radc" name="planoSaud" />C
   </fieldset> 
</FORM>
<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 2 </font></legend>
      <input disabled="disabled" type="radio" id ="radx" name="planoSaud" />X
      <input disabled="disabled" type="radio" id="radz" name="planoSaud" />Z
   </fieldset>
</FORM>

  • There in case when I click on the Rad'B' and then click on the Rad'Z' for example, and without following I click on the Rad'A' the Rad'Z' is just disabled, I would like to clean it, because it still looks as if I were selected.

  • @Ricksoz97 Updated response.

  • Would have some other method that could be used without using querySelector? due to the fact that I am still starting to use programming logic (for both web page and software). Ai in the case I was using in some exercises the document.getElementById('teste').disabled= false and with the querySelectori’m not getting to run it right on JS.

  • @Ricksoz97 There is... I’ll do it here and send you

  • @Ricksoz97 There it would be necessary to create an array with the radio ids A, B and C. See in this Jsfiddle: https://jsfiddle.net/62s22u65/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.