Change content of div via checkbox

Question

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>

Welcome to SO. what have you tried..? please provide the code you have so far… as far as i know, this is not the place where people does your job or homework for free... — T J, Jun 04 '14 at 12:18
See this post http://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event — hlscalon, Jun 04 '14 at 12:19
@Muratto - The point being; this is not a place where you can just type "I want make big div red" and it magically appears, this is a place where you can get help with an actual programming problem ***after*** you've typed an understandable question showing us exactly what the problem is and what you've tried to solve it. — adeneo, Jun 04 '14 at 12:22
@adeneo thanks god not every people like you. If you dont help, you dont need to be spend time with my post. Your time is important. Have a nice day and thank for -1 — Muratto, Jun 04 '14 at 12:29
@1nflktd thank you friend, i check this. I check every stackoverflow.com :( Thats only change text inside of inputbox — Muratto, Jun 04 '14 at 12:30
@Muratto: See this and try to figure out: http://jsfiddle.net/abhitalks/Ch6LE/ — Abhitalks, Jun 04 '14 at 12:48

score 0 · Answer 1 · answered Jun 04 '14 at 12:21

0

If you are using jQuery, you can use following pseudo code for achieving this.

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

answered Jun 04 '14 at 12:21

Sandeeproop

1,716
1
12
17

Your pseudo code has syntax errors, it's missing a closing parenthesis and quotes – adeneo Jun 04 '14 at 12:23
@Sandeeproop thank you my friend, i try it. I am only designer actually. I try learn – Muratto Jun 04 '14 at 12:34

score 0 · Answer 2 · answered Jun 04 '14 at 12:38

0

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();
        }
    });
});

answered Jun 04 '14 at 12:38

hlscalon

6,800
3
28
39

thank you @1nflktd I make like this http://jsfiddle.net/fASWY/ but i make something wrong? – Muratto Jun 04 '14 at 12:45
@Muratto You haven't added the jquery library :) just add some and it should work. – hlscalon Jun 04 '14 at 12:50

score 0 · Accepted Answer · answered Jun 04 '14 at 12:45

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

the fiddle http://jsfiddle.net/4XsYA/1/

thank you very much! that what i am trying to do :) Teşekkürler! — Muratto, Jun 04 '14 at 12:47

Change content of div via checkbox

3 Answers3