基於從以前的表格中選擇的清單創建新表格

Question

基本上我想創建一個表單，根據清單選擇創建一個新表單。例如，在查看我的代碼時，如果我選中了第1部分，測試項目2並提交了它。在提交時，它會拉起一個新的頁面（或加載到當前頁面）更深入的步驟。我正在嘗試製作一個模板以用於多個文檔，因此只需將其添加到該文檔中就不會爲我做。

（1）如何使第1,2和3部分在檢查之前一無所有？無需點擊複選框兩次以使其消失，我寧願讓它不在那裏並在選中時顯示。

（2）我希望所有的檢查表，檢查所有的箱子，但不顯示或隱藏他們（我知道這是不是編碼正確的，但我不知道如何）

這裏是我的代碼： http://jsfiddle.net/kNsW9/2/

<script> 
$(document).ready(function(){ 
    $('#all').click(function(){ 
     if ($('#all').is(':checked')) 
      $(this).nextAll('li').show(); 
     else 
      $(this).nextAll('li').hide(); 
    }); 

    $('#1').click(function(){ 
     if ($('#1').is(':checked')) 
      $(this).nextUntil('ol').show(); 
     else 
      $(this).nextUntil('ol').hide(); 
    }); 

    $('#2').click(function(){ 
     if ($('#2').is(':checked')) 
      $(this).nextUntil('ol').show(); 
     else 
      $(this).nextUntil('ol').hide(); 
    }); 

    $('#3').click(function(){ 
     if ($('#3').is(':checked')) 
      $(this).nextUntil('ol').show(); 
     else 
      $(this).nextUntil('ol').hide(); 
    }); 
}); 
</script> 
<form> 
Table of Contents<br /> 
Please Select What to Test:<br /> 
<input type="checkbox" id="all" onclick="check(this.id)"></input>All 
<ol><input type="checkbox" id="1"></input>Section 1 
<li><input type="checkbox"></input>Test Item 1</li> 
<li><input type="checkbox"></input>Test Item 2</li> 
</ol> 
<ol><input type="checkbox" id="2"></input>Section 2 
<li><input type="checkbox"></input>Test Item 1</li> 
<li><input type="checkbox"></input>Test Item 2</li> 
<li><input type="checkbox"></input>Test Item 3</li> 
<li><input type="checkbox"></input>Test Item 4</li> 
<li><input type="checkbox"></input>Test Item 5</li> 
<li><input type="checkbox"></input>Test Item 6</li> 
</ol> 
<ol><input type="checkbox" id="3"></input>Section 3 
<li><input type="checkbox"></input>Test Item 1</li> 
<li><input type="checkbox"></input>Test Item 2</li> 
<li><input type="checkbox"></input>Test Item 3</li> 
<li><input type="checkbox"></input>Test Item 4</li> 
<li><input type="checkbox"></input>Test Item 5</li> 
</ol> 
<!--<input type="submit" value="Submit">--> 
</form> 

Answer 1

讓我知道如何這對你的作品...

http://jsfiddle.net/kNsW9/9/

*我了用CSS控制LI的公開程度，而不是jQuery的 檢查都將檢查所有子項，取消選中所有將取消所有子項目

*我假設，如果你檢查所有，然後取消選擇一個子項，所有的應該是未經檢查的日期對吧？

$('#all').click(function(){ 
    var checked = $(this).prop('checked'); 
    $('#section1,#section2,#section3').each(function() { 
     $(this).find('input:checkbox').prop('checked', checked); 
    }); 
}); 

Answer 2

我在你的jsfiddle中做了一些改動，不確定這是不是你要找的。讓我知道，如果這是它還是我誤解了這個問題：

DEMO：http://jsfiddle.net/kNsW9/4/

你是在正確的方向剛剛做出的微小變化

$('#1').nextUntil('ol').hide() 
$('#2').nextUntil('ol').hide(); 
$('#3').nextUntil('ol').hide(); 

$('#all').click(function(){ 
    $('#1').click(); 
    $('#2').click(); 
    $('#3').click(); 
});