Change content of div via checkbox

 

I want my div to show content, then disappear when I click a checkbox and that it shows a second content in it.
When the checkbox is unchecked then the div shows the previous content back and hides the current one.

Each div have one input box and a submit button.

Thank you

Code Example :

I am using this, want to be modified this to when checkbox clicked div1 disseper and show 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
}

With jquery you could do something like this. Remember putting your <script> inside the <head> tag. 

$(document).ready(function() {
    $('#checkboxes-0').change(function() {
       if($(this).is(":checked")) {
           $("#div2").show();
           $("#div1").hide();
        } else {
           $("#div2").hide();
           $("#div1").show();
        }
    });
});
链接地址: http://www.djcxy.com/p/56016.html

上一篇: jquery绑定函数在Firefox和Chrome之间有不同的执行顺序

下一篇: 通过复选框更改div的内容