How to select a radio through another?

Question

How to select a radio through another?

Navigation

#1 by (1 votes)

1

Let's say that I have 3 inputs of type 'radio' (A, B, C) and I have two other 'radio' (X, Z) disabled and can only be auto-selected if the radio B or C is clicked, and if I click the radio A < strong>, the radios (X, Z) should come back and be disabled again.

The following is the code for example, so I 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!

javascript html

asked by anonymous 26.11.2017 / 21:36

1 answer

Change background image without fade How do I inherit an abstract class in C ++?

score 1 · Accepted Answer

You can add eventListener to radios A, B, and C. Also add 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>