Event from the choice of the jquery radio option

Navigation
0

I'm having trouble deploying the following function and would like your help;

I have input with two options of radio . if the user selects the value_1, the jQuery removes the class hidden from a div and adds it to another, if he selects the value_2 the same happens, but with another div . The problem is that I have never come across this situation. Hugs! 

 .hidden{
   display:none;
   }
<div role="tabpanel" class="tab-pane active" id="tab_contabeis">
 <br/>
  <div class="radio">
    <label>
      <input type="radio" name="demo_radio" id="demo_radio" value="atendeu" checked>A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Atendeu</strong> os Parâmetros da mencionada Instrução.
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="demo_radio" id="demo_radio_n" value="n_atendeu">A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Não Atendeu</strong> os Parâmetros da mencionada Instrução.
    </label>
  </div>
  <br/>
  <div class="controle">
    <textarea id="demonstrativocontabeis" name="demonstrativocontabeis" class="form-control" rows="10">
    </textarea>
  </div>
  <div class="controle hidden">
    <textarea id="demonstrativocontabeis_n" name="demonstrativocontabeis_n" class="form-control hidden" rows="10">
    </textarea>
  </div>
</div>
    
asked by anonymous 23.09.2015 / 17:02

1 answer

1

Hello,

1 - I added two classes to the control 

<div role="tabpanel" class="tab-pane active" id="tab_contabeis">
    <br/>
    <div class="radio">
        <label>
            <input type="radio" name="demo_radio" id="demo_radio" value="atendeu" checked>A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Atendeu</strong> os Parâmetros da mencionada Instrução.</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="demo_radio" id="demo_radio_n" value="n_atendeu">A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Não Atendeu</strong> os Parâmetros da mencionada Instrução.</label>
    </div>
    <br/>
    <div class="controle atendeu">
        <textarea id="demonstrativocontabeis" name="demonstrativocontabeis" class="form-control" rows="10">atendeu</textarea>
    </div>
    <div class="controle nao-atendeu hidden">
        <textarea id="demonstrativocontabeis_n" name="demonstrativocontabeis_n" class="form-control hidden" rows="10">não atendeu</textarea>
    </div>
</div>

2 - your css 

.hidden {
  display:none;
}

3 - jquery to control 

//adiciona o evento para identificar quando foi alterado
jQuery('input[name="demo_radio"]').on("change", function () {
    //remove a class qeu esconde os itens
    jQuery(".hidden").removeClass("hidden");
    //verifica qual o item foi selecionado e coloca a classe hidden no outro
    if (jQuery(this).val() == "atendeu") {
        jQuery(".nao-atendeu").addClass("hidden");
    } else if (jQuery(this).val() == "n_atendeu") {
        jQuery(".atendeu").addClass("hidden");
    }
});

The link to the working example is here

    
23.09.2015 / 17:18
custom listview repeating last insert inserted Disable button when selecting item in DataGrid