Question

我希望我的div显示内容，然后当我单击一个复选框并且显示其中的第二个内容时消失。
当取消选中该复选框时，div显示之前的内容并隐藏当前内容

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

谢谢

代码示例：

我正在使用此功能，希望将其修改为当复选框点击div1 disseper并显示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>

Answer 1

如果您使用的是jQuery，则可以使用以下伪代码来实现此目的。

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

Answer 2

使用jquery你可以做这样的事情。请记住将<script>放在<head>标记内。

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

Answer 3

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

通过复选框更改div的内容

3 个答案: