通过复选框更改div的内容
我希望我的div显示内容，然后当我点击一个复选框并显示其中的第二个内容时消失。
当复选框未被选中时，div显示前一个内容并隐藏当前内容。
每个div都有一个输入框和一个提交按钮。
谢谢
代码示例：
我正在使用这个，想修改这个时候复选框点击div1解析并显示div2
<script type="text/javascript">
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>
<input type="checkbox" name="multi_note" id="checkboxes-0" value="1" onclick="showMe('div1', this)"> Show Div
<div id="div1" style="display:none">
<label>Example 1</label>
<select id="selectbasic" name="selectbasic" class="form-control">
</div>
<script>
x=false;
function Check(){
if(x){
document.getElementById("div1").style.display='inline';
document.getElementById("div2").style.display='none';
x=false;
}
else{
document.getElementById("div1").style.display='none';
document.getElementById("div2").style.display='inline';
x=true;
}
}
</script>
Select Div<input type="checkbox" id="check" onclick="Check()">
<br>
<div id="div1">
<form>
<h2>First Div</h2>
<input type="text" placeholder="Enter text">
<input type="submit" value="Submit Div1">
<form>
</div>
<div id="div2" style="display:none">
<form>
<h2>Second Div</h2>
<input type="text" placeholder="Enter text">
<input type="submit" value="Submit Div2">
<form>
</div>
小提琴http://jsfiddle.net/4XsYA/1/
如果您使用的是jQuery，则可以使用以下伪代码来实现此目的。
if($("input[type=checkbox]").prop(":checked")) {
//hide some div and show another
}
else {
// code for reversing the above show/hide
}
用jQuery你可以做这样的事情。 请记住将<script>放入<head>标签内。
$(document).ready(function() {
$('#checkboxes-0').change(function() {
if($(this).is(":checked")) {
$("#div2").show();
$("#div1").hide();
} else {
$("#div2").hide();
$("#div1").show();
}
});
});