Text box to appear when a radio button is selected

Question

I want to get a text box to appear when a radio button is selected yes . This is what my code looks like;

Care of Address? <br>
Yes<input type="radio" name="radio1" value="Yes" onClick="getResults(this)">
No<input type="radio" name="radio1" value="No" onclick="getResults(this)">

<div class="text"><p>Address Line 1  <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3  <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode  <input type="text" name="text5" id="text5" maxlength="30"></p></div>

<script> 
    (document).ready(function() {
        (".text").hide()

    });
    function getResults(elem) {
        elem.checked && elem.value == "Yes" ? (".text").show() : (".text").hide();
    };
    </script>

Can anyone help me

Abi

Answer 1

Try this:

function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvtext = document.getElementById("dvtext");
        dvtext.style.display = chkYes.checked ? "block" : "none";
    }

<label for="chkYes">
    <input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />
    No
</label>
<div id="dvtext" style="display: none">
    Text Box:
    <input type="text" id="txtBox" />
</div>

Answer 2

You don't even need JavaScript for this, let alone JQuery or Vue

#dvtext {
  display: none;
}
#chkYes:checked ~ #dvtext {
  display: block;
}

<input type="radio" id="chkYes" name="chk" />
<label for="chkYes">Yes</label>

<input type="radio" id="chkNo" name="chk" />
<label for="chkNo">No</label>

<div id="dvtext">
    Text Box:
    <input type="text" id="txtBox" />
</div>