【发布时间】：2015-12-08 02:48:42
【问题描述】：
基本上；我想要实现的是'当且仅当'我的静态 HTML 表单中的一个元素被选中；因此，如果选中复选框 > 则用户点击“提交”按钮。未选中的项目或复选框，简单地消失了，我用下面的 sn-p 代码有这个。
$("input[type=checkbox]:not(:checked)").parent().hide();
好的，所以那些没有被检查的也像他们应该的那样正确隐藏，完美！问题是：在用户“选择/选中”然后点击提交按钮后，我需要复选框容器 div 在下一页上填充唯一的 HTML。所以目前在下一页；未选中的项目隐藏，表单元素隐藏，所以这一切都很完美。所以它只是被检查的复选框/项目的黑色（当前灰色背景）包装器 div。但我只需要在每个中调用自定义 HTML。
再次；用户流程：静态主页 HTML 表单 > 用户选择复选框 > 点击提交 > 下一页所有未选中的项目隐藏，复选框本身都隐藏，但它们各自的包装容器仍然存在 - 我只是希望自定义 HTML 此时出现在每个.与空白相反因此，此时在每个 div 中插入自定义 HTML 是我的奋斗目标
以下是完整页面代码：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<style>
#item1 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item2 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item3 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item4 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
.space {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px 4px 4px 4px;
}
</style>
<body>
<div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
<br/>
<div class="row" id="item1" class="box">
Item 1 Details for the PDF test.
<br>
<input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
<br />
</div>
<div class="space"></div>
<div class="row" id="item2" class="box">
Item 2 Details for the PDF test.
<br>
<input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
<br />
</div>
<div class="space"></div>
<div class="row" id="item3" class="box">
Item 3 Details for the PDF test.
<br>
<input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
<br />
</div>
<div class="space"></div>
<div class="row" id="item4" class="box">
Item 4 Details for the PDF test.
<br>
<input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
<br />
</div>
<div class="space"></div>
<center>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
</p>
</div>
</div>
</div>
</center>
<div id="print" style="background-color:#fff"></div>
<script type="text/javascript">
$("#container").css('background', '#fff')
$('.download-pdf').click(function() {
$("input[type=checkbox]:not(:checked)").parent().hide();
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function() {});
var file = 'test';
if (typeof doc !== 'undefined') {
doc.save(file + '.pdf');
} else if (typeof pdf !== 'undefined') {
(function() {
pdf.save(file + '.pdf');
// $("#item4").hide();
}, 2000);
} else {
alert('Error 0xE001BADF');
}
});
</script>
</body>
</html>【问题讨论】：
-
有提交按钮吗？您提到“下一页”，此代码是第 1 页还是第 2 页或两者兼而有之？
-
总共只有 2 页，提交按钮本质上只是充当“下一步按钮”。没有“提交”或“收集”数据。
标签： javascript jquery checkbox