基本上我想创建一个表单,在提交时会根据清单选择创建一个新表单。
例如,当查看我的代码时,如果我选中了Section 1, Test Item 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>
让我知道这是如何为您工作的…
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);
});
});
我在你的jsfiddle做了一些改变,不确定这是否是你所寻找的。让我知道这是它还是我误解了问题:
演示: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();
});