javascript - jquery function to showhide textareas based on which option is selected - Stack Overflow

admin管理员组

文章数量:1410682

I'm working up a basic survey and one of the questions is a yes/no question. If the user selects no, I'd like to show a textarea below the question for the user to explain his/her reasons for the no answer. If they click yes, the text box remains hidden (or hides if they had clicked no and shown it).

Here is a snippet of my HTML (yes, I'm using tables for formatting :-) . It saves me time in this case). There are 4 yes/no questions. This is just one of them. The only difference among them are the id names (#explain1, #explain2, #explain3, #explain4)

<tr id="yesno1">
    <!-- yes/no1 choices --> <!-- Yes(1) No(0) -->
    <td class="center"><input name="yn1" value="1" id="yes1" type="radio"></td>
    <td class="center"><input name="yn1" value="0" id="no1" type="radio"></td>

    <!-- yes/no1 question -->
    <td class="question">
        Did you meet your goals during this program? (If no, explain.)
    </td>
</tr>

<tr class="explain-box" id="explain1">
    <td></td>
    <td></td>
    <td class="explain-text">
      <textarea name="explain1" placeholder="Please explain..."></textarea>
    </td>
</tr>

And here is my jQuery. This works with question one:

$(function() {
    $('.explain-box').hide();

    $('#no1').click(function() {
        $('#explain1').show();
    });

    $('#yes1').click(function() {
        $('#explain1').hide();
    });
});

I'm fairly fuzzy with javascript and jquery, so my question is how can I make the jquery code work without typing out the condition for each and every ID of every yes/no question? I know that I can use this somehow, but I don't know how to go about it. Can someone provide an idea of a function to use in this case? Should I just bite the bullet and type in each question condition since it's only 4 questions?

I'm working up a basic survey and one of the questions is a yes/no question. If the user selects no, I'd like to show a textarea below the question for the user to explain his/her reasons for the no answer. If they click yes, the text box remains hidden (or hides if they had clicked no and shown it).

Here is a snippet of my HTML (yes, I'm using tables for formatting :-) . It saves me time in this case). There are 4 yes/no questions. This is just one of them. The only difference among them are the id names (#explain1, #explain2, #explain3, #explain4)

<tr id="yesno1">
    <!-- yes/no1 choices --> <!-- Yes(1) No(0) -->
    <td class="center"><input name="yn1" value="1" id="yes1" type="radio"></td>
    <td class="center"><input name="yn1" value="0" id="no1" type="radio"></td>

    <!-- yes/no1 question -->
    <td class="question">
        Did you meet your goals during this program? (If no, explain.)
    </td>
</tr>

<tr class="explain-box" id="explain1">
    <td></td>
    <td></td>
    <td class="explain-text">
      <textarea name="explain1" placeholder="Please explain..."></textarea>
    </td>
</tr>

And here is my jQuery. This works with question one:

$(function() {
    $('.explain-box').hide();

    $('#no1').click(function() {
        $('#explain1').show();
    });

    $('#yes1').click(function() {
        $('#explain1').hide();
    });
});

I'm fairly fuzzy with javascript and jquery, so my question is how can I make the jquery code work without typing out the condition for each and every ID of every yes/no question? I know that I can use this somehow, but I don't know how to go about it. Can someone provide an idea of a function to use in this case? Should I just bite the bullet and type in each question condition since it's only 4 questions?

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 21, 2013 at 14:45 Brian PhillipsBrian Phillips 4,42522 gold badges2828 silver badges4040 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Try using the starts with selector:

$(function() {
    $('.explain-box').hide();

    $('[id^=no]').click(function() {
        $(this).parents("tr").next(".explain-box").show();
    });

    $('[id^=yes]').click(function() {
        $(this).parents("tr").next(".explain-box").hide();
    });
});

You could give the checkboxes a yes or no class, not just an ID. Then, using the this syntax you could find the textarea associated with it. Something along the lines of:

$(function() {
    $('.explain-box').hide();

    $('.no').click(function() {
        $(this).parents("tr").next().find('.explain-box').show();
    });

    $('.yes').click(function() {
        $(this).parents("tr").next().find('.explain-box').hide();
    });
});

EDIT

You could even simplify this further by writing one function to toggle the textarea:

$(function() {
    $('.explain-box').hide();

    $('.checkbox').click(function() {
        var show = $(this).val() == "0";
        $(this).parents("tr").next().find('.explain-box').toggle(show);
    });
});

Here's how I would do it — without tables or switches.

$('input:radio').on('change', function(){
    // pare against string value of input
    if ($(this).val() === '0')  {  
        // show textarea closest to $(this) 
        $(this).closest('div').find('textarea').show();
    }
});

Demo

本文标签： javascriptjquery function to showhide textareas based on which option is selectedStack Overflow