Hide/show textboxes with jQuery based on radio button selection

Question

I need for certain textboxes to show up when a certain radio button is clicked on my form, otherwise the textboxes should remain hidden. Here's an example of what I have:

HTML:

Radio buttons:
<p>Show textboxes<input type="radio" name="radio1" value="Show" onClick="getResults()">Do nothing<input type="radio" name="radio1" value="Nothing"></p>
Textboxes:
<div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>

jQuery:

$(document).ready(function() {
  $(".text").hide()
    function getResults() {
        $(".text").show()
    };
});

Fiddle

When I take out the .show() code, the textboxes stay hidden. I need to show them when a radio button with the onClick event gets selected. Any help would be much appreciated.

Solution 1

JSFIDDLE

Javascript

$(document).ready(function () {
    $(".text").hide();
    $("#r1").click(function () {
        $(".text").show();
    });
    $("#r2").click(function () {
        $(".text").hide();
    });
});

Html

<p>Show textboxes
    <input type="radio" name="radio1" id="r1" value="Show">Do nothing
    <input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
    <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30">
    </p>
</div>
<div class="text">
    <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30">
    </p>
</div>

Solution 2

Instead of inline onclick() javascript, you can use .click():

$(document).ready(function () {
    $(".text").hide();
    $('input[type="radio"]').eq(0).click(function() {
        $(".text").show()
    });
});

Updated Fiddle

However, you should use .change() event for the input elements:

$(document).ready(function () {
    $(".text").hide();
    $('input[type="radio"]').eq(0).change(function() {
        $(".text").show()
    });
});

Updated Fiddle

Solution 3

Currently you can pass the clicked object as this in form of parameter to getResults(), Where this refers to the current clicked object

See below

Script

$(document).ready(function() {
    $(".text").hide()

});
function getResults(elem) {
    elem.checked && elem.value == "Show" ? $(".text").show() : $(".text").hide();
};

HTML

<input type="radio" name="radio1" value="Show" onClick="getResults(this)">
Do nothing                                                         ^^^^
<input type="radio" name="radio1" value="Nothing" onclick="getResults(this)">
                                                                      ^^^^ 

Fiddle --> http://jsfiddle.net/tT48f/7/

Solution 4

Check this demo jsFiddle

jQuery

$(document).ready(function() {
    $(".text").hide()
    $('[name=radio1]').on('change', function(){
        $('.text').toggle(this.value === 'Show');
    })
});

Solution 5

Redefine a little bit your HTML markup and then you could only use CSS:

DEMO jsFiddle

input[value=Nothing]:checked ~ .text{
    display: none;
}

View more solutions

Comments

[user3361043]

This is simple to understand and works great. Thanks.

[rtruszk]

Welcome to StackOverflow. When answering question pay attention to code formatting. Also try to avoid code only answers.

[abarisone]

Could you please elaborate more your answer adding a little more description about the solution you provide?