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

Asked

Viewed 135 times

3

I have a group of Radio Button, some of them have other inputs as children, if you check the Input Pai they must appear, if it is unchecked they must disappear.

As in the HTML down 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>

Correto

In the image above is correct, but if you select an input that also has children, you should close all others, as well as below.

Errado

The same should happen if you select a Radio Button that nay have children, close all child inputs group. As in the image below.

Fechar todos

I made this code but I didn’t succeed...

The biggest problem is that it should be dynamic, should work on all radiobuttons, so I used the click event.

$('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
  • 1

    I will start by recommending you to study CSS urgently. Styles inline are very bad for maintenance, besides leaving the polluted code.

  • I am fully aware of the CSS but in the current situation of the code, I have no condition to apply CSS in this way... it is kind of necessary inline, this application is VB.NET and this code runs via Webbrowserform, hence it gets a little more complicated I would say.

1 answer

2


EDIT

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

See the example as it turned out:

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

Dude I don’t know much about JS, but with jQuery I made this model very simple, maybe it’s not the best way to write JS, and it may be that someone will know how to answer you with a leaner code and that does the same thing.

But here’s 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>

<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 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>

  • great, the problem is that it should be dynamic, it should work on all application radiobuttons, so I can’t use single id’s this way. I thought I’d make one for to sweep the group

  • @Carlitomurta I’m figuring out a way to do with CSS, I think it will make it easier.

  • @Carlitomurta made a CSS-only option from a look at EDIT I did in my reply

  • I used your suggestion, Voce used some framework or css Preprocessor? did not work for me

  • @Carlitomurta doesn’t need any CSS processor, note that I also changed the HTML as I explained in the answer. I had to put the inputs that will appear inside the father div. Notice that I edited the answer again and put a much simpler jQuery option, and that it does not depend on ID to work! Any doubt says here that I try to explain it to you. Only the JS I’m kind of limited... but qq thing in CSS is just ask

  • gave everything right after modifying html! , thanks man, saved me! and with 7 lines of CSS hahaha

  • @Carlitomurta good boy, good luck with the project

Show 2 more comments

Browser other questions tagged javascript html css input

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