jQuery函數根據選擇的選項顯示/隱藏文本區域

Question

我正在進行一項基本調查，問題之一是是/否。 如果用戶選擇“否”，那么我想在問題下方顯示一個文本區域，以供用戶解釋其“否”答案的原因。 如果他們單擊“是”，則文本框將保持隱藏狀態（如果單擊“否”並顯示該文本框則將隱藏）。

這是我的HTML的摘要（是的，我正在使用表格進行格式化:-）。 在這種情況下，可以節省我的時間。 有4個是/否問題。 這只是其中之一。 它們之間的唯一區別是id名稱（ #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>

這是我的jQuery。 這適用於問題一：

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

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

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

我對javascript和jquery很模糊，所以我的問題是如何在不鍵入每個yes / no問題的每個ID條件的情況下使jquery代碼正常工作？ 我知道我可以以某種方式使用this ，但是我不知道該怎么做。 有人可以提供在這種情況下要使用的功能的想法嗎？ 由於只有4個問題，我是否應該咬一下子彈並鍵入每個問題條件？

Answer 1

嘗試使用帶選擇器的開始 ：

$(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();
    });
});

Answer 2

您可以為復選框提供是或否的類，而不僅僅是ID。 然后，使用此語法，您可以找到與其關聯的文本區域。 類似於以下內容：

$(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();
    });
});

編輯

您甚至可以編寫一個函數來切換文本區域，從而進一步簡化此過程：

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

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

Answer 3

這是我的處理方法-沒有表或開關。

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

演示