Afficher et masquer la zone de texte sur l'option sélectionnée modifier

Question

J'ai besoin d'une zone de texte qui doit s'afficher uniquement lorsque les deux boutons radio sont sélectionnés comme si je sélectionne à la fois valeur = 1 dans le premier cas et valeur = 2 dans le second cas. Dans d'autres cas, la zone de texte devrait disparaître. J'espère que quelqu'un peut aider. Merci.

<div class="row top-margin" id="remote"> 
 
\t \t \t \t \t <g:if test="${remote?.id == 1}"> 
 
<input type="radio" required name="remote" value="1" checked > <l:lookupLabe lookup="remote" id="1"/> 
 
<input type="radio" required name="remote" value="2" > <l:lookupLabel lookup="remote" id="2"/> 
 
\t \t \t \t \t </g:if> 
 
\t \t \t \t \t <g:elseif test="${remote?.id == 2}"> 
 
<input type="radio" required name="remote" value="1" > <l:lookupLabel lookup="remote" id="1"/> 
 
<input type="radio" required name="remote" value="2" checked > <l:lookupLabel lookup="remote" id="2"/> 
 
\t \t \t \t \t </g:elseif> 
 
\t \t \t \t \t <g:else> 
 
<input type="radio" required name="remote" value="1" > <l:lookupLabel lookup="remote" id="1"/> 
 
<input type="radio" required name="remote" value="2" > <l:lookupLabel lookup="remote" id="2"/> 
 
\t \t \t \t \t </g:else> 
 
</div> 
 
\t \t \t \t \t \t 
 

 
<div class="col-xs-12 col-sm-6" id="ref"> 
 
\t \t \t \t \t <g:if test="${ref?.id == 1}"> 
 
<input type="radio" required name="ref" value="1" checked > <g:message code="default.yes.label"/> 
 
<input type="radio" required name="ref" value="2" > <g:message code="default.no.label"/> 
 
\t \t \t \t \t </g:if> 
 
\t \t \t \t \t <g:elseif test="${ref?.id == 2}"> 
 
<input type="radio" required name="ref" value="1" > <g:message code="default.yes.label"/> 
 
<input type="radio" required name="ref" value="2" checked > <g:message code="default.no.label"/> 
 
\t \t \t \t \t </g:elseif> 
 
\t \t \t \t \t <g:else> 
 
<input type="radio" required name="ref" value="1" > <g:message code="default.yes.label"/> 
 
<input type="radio" required name="ref" value="2" > <g:message code="default.no.label"/> 
 
\t \t \t \t \t </g:else> 
 
</div> 
 
\t \t \t \t \t </div> \t \t \t \t 
 

 
<div id=divtext style='display:none'> <textarea id="txt1" name="title" > </textarea></div>

Answer 1

Avec JavaScrip vous feriez quelque chose comme:

var radio1 = document.getElementsByName('ref1'); var radio2 = document.getElementsByName('ref2');

if (radios1.checked && radio2.checked) { 
    // do whatever you want with the checked radio 
    // in this case will be display the textarea 

    document.getElementById('txt1').style.display = 'block'; 
} 

J'espère aider.