Javascript 通过复选框更改div的内容

我希望我的div显示内容，然后在我单击复选框并在其中显示第二个内容时消失。
如果未选中复选框，则div将显示前一个内容并隐藏当前内容

每个div都有一个输入框和一个提交按钮

多谢各位

代码示例：

我正在使用它，希望将其修改为当复选框单击div1 diseper并显示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>

函数showMe（it、box）{
var vis=（复选框）？“块”：“无”；
document.getElementById（it.style.display=vis）；
}
节目组
例1

如果您使用的是jQuery，那么可以使用以下伪代码来实现这一点

if($("input[type=checkbox]").prop(":checked")) {
  //hide some div and show another
}
else {
  // code for reversing the above show/hide
}

---

使用jquery，您可以做类似的事情。记得把你的

放在

标签里

$(document).ready(function() {
    $('#checkboxes-0').change(function() {
       if($(this).is(":checked")) {
           $("#div2").show();
           $("#div1").hide();
        } else {
           $("#div2").hide();
           $("#div1").show();
        }
    });
});

x=假；
函数检查（）{
如果（x）{
document.getElementById（“div1”）.style.display='inline'；
document.getElementById（“div2”）.style.display='none'；
x=假；
}
否则{
document.getElementById（“div1”）.style.display='none'；
document.getElementById（“div2”）.style.display='inline'；
x=真；
}
}
选择Div


第一组
第二组

---

小提琴

欢迎来到SO。你试过什么。。？请提供您目前拥有的代码…据我所知，这不是人们免费为您做工作或家庭作业的地方…我想要世界和平和很多钱，谢谢！如果你希望这样的事情发生，请看这个帖子@adeneo，很好luck@Muratto-重点是：；这不是一个你可以直接键入“我想要使大div变红”的地方，它神奇地出现了，这是一个你可以在键入一个可以理解的问题后获得实际编程问题帮助的地方，向我们确切地说明问题是什么以及你试图解决它。你的伪代码有语法错误，它缺少一个右括号quotes@Sandeeproop谢谢你，我的朋友，我试试看。我实际上是唯一的设计师。我试着学习感谢你@1nflktd我这样做，但我做错了什么？@Muratto你还没有添加jquery库：）只要添加一些就可以了。非常感谢！这就是我想做的：）泰克居勒！

<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>