show div and hide another div using checkbox

Question

i need to hide div1 and show div2 when checkbox1 is checked

i have used below code but it didn't work

<script type="text/javascript">
    function valueChanged() {
        if ($('.checkbox1').is(":checked"))
            $(".div2").show();
        else
            $(".div1").hide();
    }
</script>

Html

<input type="checkbox" name="checkbox1" onchange="valueChanged()"  />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>

Nenad Vracar · Accepted Answer · 2016-05-03 22:21:29Z

2

Instead you can just use toggle()

function valueChanged() {
  $('.row').toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" onchange="valueChanged()" />
<div class="row show" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>

edited May 3, 2016 at 22:21

answered May 3, 2016 at 22:10

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nick Goodrum · Accepted Answer · 2016-05-03 22:22:18Z

If you want to keep it JS based your logic isn't quite right. Corrections below:

HTML Update:

<input id="checkbox1" type="checkbox" name="checkbox1" onchange="valueChanged()">
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none;">Show Div 2</div></div>

Javascript:

<script type="text/javascript">
    function valueChanged() {
        if ($("#checkbox1").is(":checked")) {
            $("#div2").show();
            $("#div1").hide();
        } else {
            $("#div1").show();
            $("#div2").hide();
        }
    }
</script>

If you want to do it with just CSS instead add a class or id to the checkbox as well and use the ~ selector. You'll also want to remove the inline display none on the div2.

#div2 { display:none; }
#checkbox:checked ~ #div1 { display:none; }
#checkbox:checked ~ #div2 { display:block; }

Gabriel McAdams · Accepted Answer · 2016-05-03 22:28:29Z

1

You code is not correct. It should be like this:

function valueChanged() {
  if ($('#checkbox1').is(":checked")) {
    $("#div1").hide();
    $("#div2").show();
  } else {
    $("#div1").show();
    $("#div2").hide();
  }
}

// OR you could just use toggle()
function valueChanged2() {
  $('.row').toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" onchange="valueChanged()"  />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>

edited May 3, 2016 at 22:28

answered May 3, 2016 at 22:18

Gabriel McAdams

58.5k12 gold badges67 silver badges78 bronze badges

Comments

Dresha · Accepted Answer · 2016-05-03 22:08:13Z

0

You use not correct access to elements

<script type="text/javascript">
    function valueChanged() {
        if ($(this).is(":checked"))
            $("#div2").show();
        else
            $("#div1").hide();
    }
</script>

answered May 3, 2016 at 22:08

Dresha

961 silver badge5 bronze badges

Collectives™ on Stack Overflow

show div and hide another div using checkbox

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related