Javascript - Hide children from the radiobutton when you select another radio from the same group

Question

Javascript - Hide children from the radiobutton when you select another radio from the same group

Navigation

#1 by (1 votes)

2

I have a Radio Button group, some of them have other inputs as children, if they check the Input Father they should appear, if it is unchecked they should disappear. p>

As in HTML below:

<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
  <div style="float:left;">
    <label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
    <input type="hidden" title="" id="7329_2338" name="hidden_2338">
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7330_2370" name="radio_2370"  value="0">
      <label for="7330_2370" title="">Não</label>
    </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7331_2370" name="radio_2370"  value="1">
      <label for="7331_2370" title="">Sim </label>
    </div>
    <div style="padding-left: 30px; clear: both; display:none" class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7331_2371" title="">27.3.1 Agente 1</label>
        <input type="text" title="" id="7331_2371" name="text_2371"  class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
      </div>
    </div>
    <div style="padding-left: 30px; clear: both; display:none" class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7332_2371" title="">27.3.2 Agente 2</label>
        <input type="text" title="" id="7332_2371" name="text_2371"  class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
      </div>
    </div>
    <div style="padding-left: 30px; clear: both;display:none " class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7333_2371" title="">27.3.3 Agente 3</label>
        <input type="text" title="" id="7333_2371" name="text_2371"  class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
      </div>
    </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7334_2370" name="radio_2370" value="2">
      <label for="7334_2370" title="">Exame não realizado</label>
    </div>
        <div style="padding-left: 30px; clear: both; display:none" class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7331_2371" title="">27.3.1 Agente 1</label>
        <input type="text" title="" id="7331_2371" name="text_2371"  class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
      </div>
    </div>
    <div style="padding-left: 30px; clear: both; display:none" class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7332_2371" title="">27.3.2 Agente 2</label>
        <input type="text" title="" id="7332_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
      </div>
    </div>
    <div style="padding-left: 30px; clear: both;display:none " class="linha-opcao-resposta">
      <div style="float:left;">
        <label for="7333_2371" title="">27.3.3 Agente 3</label>
        <input type="text" title="" id="7333_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
      </div>
    </div>
  </div>
  <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
      <input type="radio" title="" id="7405_2370" name="radio_2370" value="3">
      <label for="7405_2370" title="">Não se aplica</label>
    </div>
  </div>
</div>

Intheaboveimageitiscorrect,butifyouselectaninputthatalsohaschildren,youshouldcloseallothers,asbelow.

ThesamethingshouldhappenifyouselectaRadioButtonthatdoesnothavechildren,closeallthechildren'sgroupinputs.Justliketheimagebelow.

ImadethiscodebutIdidnotsucceed...

Thebiggestproblemisthatitshouldbedynamic,itshouldworkonallradiobuttons,soIusedtheclickevent.

$('input[type="radio"]').on("change", function() {
  var element = $(this);
  var pais = element
    .parent()
    .parent()
    .parent(); // SUBIR ATÉ A DIV SUPERIOR DO GRUPO
  var filhos = pais.children(".linha-opcao-resposta"); // CAPTURAR AS DIVS FILHAS
  var netos = element
    .parent()
    .parent()
    .children(".linha-opcao-resposta"); // CAPTURAR OS INPUTS FILHOS DO RADIO BUTTON

  if (netos.length > 0) {
    for (let i = 0; i < netos.length; i++) {
      netos[i].style.display = "block";
    }
  } else {
    for (let i = 0; i < filhos.length; i++) {
      netos = filhos[i].children();
      alert(netos.length);
      for (let j = 0; j < netos.length; j++) {
        netos[j].children(".linha-opcao-resposta").style.display = "none";
      }
    }
  }
});

javascript html css input

asked by anonymous 26.06.2018 / 15:56

1 answer

Put local Maven project as dependency on Gradle project PHP min ($ footage) bringing the wrong value

score 1 · Accepted Answer

EDIT

As you said it has to be dynamic without using ID, I made a template with CSS. I had to move a little bit in the HTML structure, I just put the fields that will appear inside the "parent" div, so I make a CSS rule when the radio: button is: checked

See the example as follows:

input[type="radio"] ~ div {
    display: none;
}
input[type="radio"]:checked ~ div {
    display: block;
}

<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
        <label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
        <input type="hidden" title="" id="7329_2338" name="hidden_2338">
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7330_2370" name="radio_2370" value="0">
            <label for="7330_2370" title="">Não</label>
        </div>
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7331_2370" name="radio_2370" value="1">
            <label for="7331_2370" title="">Sim </label>

            <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7331_2371" title="">27.3.1 Agente 1</label>
                    <input type="text" title="" id="7331_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7332_2371" title="">27.3.2 Agente 2</label>
                    <input type="text" title="" id="7332_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7333_2371" title="">27.3.3 Agente 3</label>
                    <input type="text" title="" id="7333_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
        </div>
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7334_2370" name="radio_2370" value="2">
            <label for="7334_2370" title="">Exame não realizado</label>

            <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7331_2371" title="">27.3.1 Agente 1</label>
                    <input type="text" title="" id="7331_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7332_2371" title="">27.3.2 Agente 2</label>
                    <input type="text" title="" id="7332_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7333_2371" title="">27.3.3 Agente 3</label>
                    <input type="text" title="" id="7333_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
        </div>
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7405_2370" name="radio_2370" value="3">
            <label for="7405_2370" title="">Não se aplica</label>
        </div>
    </div>
</div>

If you want to use with jQuery

I do not understand much about JS, but with jQuery I made this model very simple, maybe it's not the best way to write JS, and it might be that someone will know to answer you with a leaner code and do the same thing.

But here is an example that can work for you, without using ID

$(document).ready(function(){
   $("input[type='radio']").click(function(){
      $('.divOculto')
      .removeClass("show");
      $(this)
      .closest('div')        
      .find('.divOculto')   
      .addClass("show");
   }); 
});

.divOculto {
    display: none;
}
.show {
    display: block;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><divstyle="padding-left:30px;clear:both;" class="linha-opcao-resposta">
    <div style="float:left;">
        <label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
        <input type="hidden" title="" id="7329_2338" name="hidden_2338">
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7330_2370" name="radio_2370" value="0">
            <label for="7330_2370" title="">Não</label>
        </div>
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7331_2370" name="radio_2370" value="1">
            <label for="7331_2370" title="">Sim </label>

            <div class="divOculto" style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7331_2371" title="">27.3.1 Agente 1</label>
                    <input type="text" title="" id="7331_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div class="divOculto" style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7332_2371" title="">27.3.2 Agente 2</label>
                    <input type="text" title="" id="7332_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div class="divOculto" style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7333_2371" title="">27.3.3 Agente 3</label>
                    <input type="text" title="" id="7333_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
        </div>
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7334_2370" name="radio_2370" value="2">
            <label for="7334_2370" title="">Exame não realizado</label>

            <div class="divOculto" style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7331_2371" title="">27.3.1 Agente 1</label>
                    <input type="text" title="" id="7331_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div class="divOculto" style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7332_2371" title="">27.3.2 Agente 2</label>
                    <input type="text" title="" id="7332_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
            <div class="divOculto" style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
                <div style="float:left;">
                    <label for="7333_2371" title="">27.3.3 Agente 3</label>
                    <input type="text" title="" id="7333_2371" name="text_2371" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
                </div>
            </div>
        </div>
    </div>
    <div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
        <div style="float:left;">
            <input type="radio" title="" id="7405_2370" name="radio_2370" value="3">
            <label for="7405_2370" title="">Não se aplica</label>
        </div>
    </div>
</div>