Question

基本上我想创建一个表单，提交后会根据清单选择创建一个新表单。

例如，在查看我的代码时，如果我检查了第1部分，测试项目2并提交了它。在提交时，它将在更深入的步骤中拉出新页面（或加载到当前页面上）。我正在尝试制作一个模板用于多个文档，所以只需在其中添加它就不会对我有用。

（1）如何检查第1,2和3节之前什么都没有？我没有必要单击复选框两次以使其消失，我宁愿让它不在那里并在检查时出现。

（2）我希望All清单检查所有方框但不显示或隐藏它们（我知道这不是正确的编码，但我不知道如何）

<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

我在你的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();
});

Answer 2

让我知道这对你有用......

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

*我用css控制LI的visibilty而不是jquery更新了全部检查将检查所有子项，取消选中全部将取消选中所有子项

*我假设如果你全部检查，那么取消选中一个也应该取消选中的子项，对吧？

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

根据上一个表单中的选定核对表创建一个新表单

2 个答案: