JQuery在問卷中隱藏/顯示div

我正在設計一個使用單選按鈕和複選框詢問一系列問題的問卷。我想用jQuery來以小塊顯示問題，而不是一次顯示幾個問題。JQuery在問卷中隱藏/顯示div

這是我到目前爲止有：

<p> 
    1a. Has this happened to you? <label><input id="radio1" type="radio" name="toggler" value="1" />Yes </label> 
    <label><input id="radio2" type="radio" name="toggler" value="2" />No </label> 
</p> 

<div id="blk-2" class="toHide" style="display:none"> <!-- 1a. Choice: No --> 
    <form name="form1" method="post" action="nextPage.html"> 
     <input type="submit" name="Submit" value="Continue"><br /><br /> 
    </form> 
</div> 

<div id="blk-1" class="toHide" style="display:none"> <!-- 1a. Choice: Yes --> 
<p> 
    1b. How often has this happened to you? 
</p> 
<p><input type="radio" name="how_often" value="day" /> one of more times a day</p> 
<p><input type="radio" name="how_often" value="week" /> one of more times a week</p> 
<p><input type="radio" name="how_often" value="month" /> one of more times a month</p> 
    <!-- Display "reveal more" button after one of the "how_often" buttons is selected --> 
<input type="submit" name="Submit" value="reveal more"><br /><br /> 
</div><!-- /blk-1 --> 




<div id="02a_part1_question" style="display:none"> 
<p> 
    2a. Where has this happened to you? 
</p> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>homeroom</td> 
      <td><input type="radio" name="homeroom" value="Yes" /></td> 
      <td><input type="radio" name="homeroom" value="No" /></td> 
     </tr> 
     <tr> 
      <td>cafeteria</td> 
      <td><input type="radio" name="cafeteria" value="Yes" /></td> 
      <td><input type="radio" name="cafeteria" value="No" /></td> 
     </tr> 
     <tr> 
      <td>academic class</td> 
      <td><input type="radio" name="academic_class" value="Yes" /></td> 
      <td><input type="radio" name="academic_class" value="No" /></td> 
     </tr> 
     <tr> 
      <td>before school</td> 
      <td><input type="radio" name="before_school" value="Yes" /></td> 
      <td><input type="radio" name="before_school" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part1_question --> 

<div id="02a_part2_question" style="display:none"> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>bus</td> 
      <td><input type="radio" name="bus" value="Yes" /></td> 
      <td><input type="radio" name="bus" value="No" /></td> 
     </tr> 
     <tr> 
      <td>after school</td> 
      <td><input type="radio" name="after_school" value="Yes" /></td> 
      <td><input type="radio" name="after_school" value="No" /></td> 
     </tr> 
     <tr> 
      <td>gym</td> 
      <td><input type="radio" name="gym" value="Yes" /></td> 
      <td><input type="radio" name="gym" value="No" /></td> 
     </tr> 
     <tr> 
      <td>dances</td> 
      <td><input type="radio" name="dances" value="Yes" /></td> 
      <td><input type="radio" name="dances" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part2_question --> 

<div id="02a_part3_question" style="display:none"> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>hallway</td> 
      <td><input type="radio" name="hallway" value="Yes" /></td> 
      <td><input type="radio" name="hallway" value="No" /></td> 
     </tr> 
     <tr> 
      <td>sporting events</td> 
      <td><input type="radio" name="sporting_events" value="Yes" /></td> 
      <td><input type="radio" name="sporting_events" value="No" /></td> 
     </tr> 
     <tr> 
      <td>bathroom</td> 
      <td><input type="radio" name="bathroom" value="Yes" /></td> 
      <td><input type="radio" name="bathroom" value="No" /></td> 
     </tr> 
     <tr> 
      <td>telephone</td> 
      <td><input type="radio" name="telephone" value="Yes" /></td> 
      <td><input type="radio" name="telephone" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part3_question --> 

<div id="02a_part4_question" style="display:none"> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>online/texting during school</td> 
      <td><input type="radio" name="texting_dur_school" value="Yes" /></td> 
      <td><input type="radio" name="texting_dur_school" value="No" /></td> 
     </tr> 
     <tr> 
      <td>online/texting outside of school</td> 
      <td><input type="radio" name="texting_out_school" value="Yes" /></td> 
      <td><input type="radio" name="texting_out_school" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02a_part4_question --> 




<div id="02b_part1_question" style="display:none"> 
<p> 
    2b. Identify the online/texting programs where this has occured. (This choice will appear if "online/texting during school" or "online/texting outside of school" was selected in 2a.) 
</p> 
    <table> 
     <tr> 
      <td></td> 
      <td><strong>Yes</strong></td> 
      <td><strong>No</strong></td> 
     </tr> 
     <tr> 
      <td>Facebook</td> 
      <td><input type="radio" name="Facebook" value="Yes" /></td> 
      <td><input type="radio" name="Facebook" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Twitter</td> 
      <td><input type="radio" name="Twitter" value="Yes" /></td> 
      <td><input type="radio" name="Twitter" value="No" /></td> 
     </tr> 
     <tr> 
      <td>IMing</td> 
      <td><input type="radio" name="IMing" value="Yes" /></td> 
      <td><input type="radio" name="IMing" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Email</td> 
      <td><input type="radio" name="Email" value="Yes" /></td> 
      <td><input type="radio" name="Email" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Myspace</td> 
      <td><input type="radio" name="Myspace" value="Yes" /></td> 
      <td><input type="radio" name="Myspace" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Texting</td> 
      <td><input type="radio" name="Texting" value="Yes" /></td> 
      <td><input type="radio" name="Texting" value="No" /></td> 
     </tr> 
     <tr> 
      <td>Online Gaming</td> 
      <td><input type="radio" name="Online_Gaming" value="Yes" /></td> 
      <td><input type="radio" name="Online_Gaming" value="No" /></td> 
     </tr> 
    </table> 
    <input value="reveal more" type="submit"><br /><br /> 
</div><!-- /02b_part1_question --> 





<div id="02c_question" style="display:none"> 
<p> 
    2c. Click on the ONE place where this has happened the most. 
    <br /> 
    (This section appears with items that were marked YES from 2a.) 
</p> 
    <table> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td> 
     </tr> 
    </table> 
    <input value="Continue" type="submit"><br /><br /> 
</div><!-- /02c_question -->

這裏的JavaScript：

$(document).ready(function() { 

    $(function() { 
     $("[name=toggler]").click(function() { 
      $('.toHide').hide(); 
      $("#blk-" + $(this).val()).toggle(); 
     }); 
    }); 

    $(':submit').click(function() { 
     $('#02a_part1_question').show(); 
     $('#02a_part2_question').show(); 
     $('#02a_part3_question').show(); 
     $('#02a_part4_question').show(); 
     $('#02b_question').show(); 
     $('#02c_question').show(); 
    }); 

});

第一部分（1A）的作品，但我似乎不能顯示的其餘部分部分正確。

任何幫助，將不勝感激。儘管它不能正常工作，但我已在此處發佈http://jsfiddle.net/mrfisherman2010/xM6Ft/1/

來源

2011-03-01 Mike E

究竟什麼是你需要修復？什麼不能正常工作？ – 2011-03-01 21:52:10

嘗試添加一個class，例如current，對於您要顯示的第一個div。當您顯示它時，請刪除class並將其添加到下一個div。示例代碼：

$('.current').show(); 
$('.current').removeClass('current').next("div").addClass('current');

演示：http://jsfiddle.net/xM6Ft/2/

更新

要隱藏以前的div你可以改變的第一行：

$('.current').show().prev("div").hide();

演示：http://jsfiddle.net/xM6Ft/4/

來源

2011-03-01 21:54:14 Sotiris

是否有可能在每個新div後僅顯示一個「顯示更多」按鈕並刪除之前的「顯示更多」按鈕？ – 2011-03-02 13:04:43

另外，假設用戶在選擇1a中選擇「是」，然後選擇點擊幾個「顯示更多」按鈕。是否有可能讓用戶回去並在1a中選擇「否」，並讓所有與「是」選項相關的div消失？ – 2011-03-02 13:05:17

@Mike E我根據你的第一條評論更新了答案。關於第二條評論，目前尚不清楚你需要什麼。檢查更新的答案，也許它做你需要的。 – Sotiris 2011-03-02 13:11:18

在您的就緒函數中，您將點擊處理程序綁定到[name = toggler]。雖然在頁面加載時，只有2個輸入有這個名字，但是（1a的那些），所以當你點擊1b中的一個單選按鈕時，什麼都沒有發生。我建議在頁面上添加相同的類所有的輸入（例如類=「toggler」），那麼改變你準備功能

$(".toggler").click(function() { 
    //... 
});

來源

2011-03-01 22:51:12 Melv

JQuery在問卷中隱藏/顯示div

回答

相關問題