jquery函數根據選擇哪個選項來顯示/隱藏textareas

我正在進行基本調查，其中一個問題是是/否問題。如果用戶選擇否，我想在問題下方顯示一個textarea，以便用戶解釋他/她無法回答的原因。如果他們點擊是，文本框將保持隱藏狀態（或隱藏，如果他們點擊了否，並顯示它）。jquery函數根據選擇哪個選項來顯示/隱藏textareas

這是我的HTML代碼片段（是的，我使用格式化表格:-)。在這種情況下它節省了我的時間）。有4個是/否問題。這只是其中之一。它們之間唯一的區別是ID名稱（#explain1，，#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相當模糊，所以我的問題是如何讓不打字了每個條件和每個是/每個ID jQuery代碼不工作題？我知道我可以以某種方式使用this，但我不知道如何去做。有人可以提供一個功能的想法在這種情況下使用？我應該只是咬緊牙關，輸入每個問題條件，因爲它只有4個問題？

來源

2013-03-21 Brian Phillips

嘗試使用starts with選擇：

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

來源

2013-03-21 14:51:18 mattytommo

完美工作 – 2013-03-21 15:06:25

你可以給複選框一個yes或no的類，而不僅僅是一個ID。然後，使用這個語法，你可以找到與之關聯的textarea。沿着線的東西：

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

編輯

你甚至可以進一步簡化這個寫一個函數來切換的textarea：

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

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

來源

2013-03-21 14:49:53 jaypeagi

可能會更簡單'$（本）。家長（「TR」）找到切換（$（本）.VAL（））。（ '解釋盒。'）。 '注意''find'只有在兩個tr都被另一個tr包裝時纔會起作用，如果不是'case' – 2013-03-21 14:56:50

@RodrigoAssis在'next'問題上出現，你可以使用'next'。我在回答中解決了這個問題。我將'$（this）.val（）'部分分開以使其更清晰。另外，需要'== 0'部分：在JavaScript的眼中，「0」和「1」都是「真」。 – jaypeagi 2013-03-21 15:07:10

下面是我將如何做我t - 沒有桌子或開關。

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

Demo

來源

2013-03-21 15:57:27 PHearst

jquery函數根據選擇哪個選項來顯示/隱藏textareas

回答

相關問題