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

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

• javascript
• html
• radio-button

• You can use Vue.js for that. It's very easy. See the docs right here... vuejs.org – Christian Gerdes Commented Feb 4, 2016 at 14:14

6 Answers 6

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>

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>

The jquery

$('.no, .yes').click(function() {
   if($('.no').is(':checked')) {
     $('.adrs').hide();
    }
    if ($('.yes').is(':checked')){
         $('.adrs').show();
    }
});

I added the class yes to the yes radio button and no to the no radio button. Alos i added the class adrs to the text fields that are adresses. Then based on the classes im hiding the adresses or showing it

Codepen

It seems that you missed to add $ before (document) as well as before (.text). Please add $ and see if it works or not. So your script would become like

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

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

Hope this helps.

that's what you should do

div.text{display:none} Care of Address?

Yes No

<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> 
    function getResults(elem) {

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

https://jsfiddle.net/2w0zf887/

Here is fiddle for you https://jsfiddle.net/Simplybj/mjLwusut/4/

You can achieve this by binding your radio buttons with click event like this

$('#rdYes').on('click', function() {
  $(".text").show();
});

$('#rdNo').on('click', function() {
  $(".text").hide();
});

and here is your HTML for that. Its better to wrap input types with label tag. And also if you are going to hide element first then try hide on DOM rendering rather than after DOM is ready to prevent from flickering

Care of Address?
<br>
<label for="rdYes">Yes</label>

<input id="rdYes" type="radio" name="radio1" value="Yes" onClick="getResults(this)">
<label for="rdNo">No</label>
<input id="rdNo" type="radio" name="radio1" value="No" onclick="getResults(this)" checked="checked">
<div class="text" style="display:none;">
  <p>Address Line 1
    <input type="text" name="text1" id="text1" maxlength="30">
  </p>
</div>