javascript - 使用复选框显示 div 并隐藏另一个 div

Question

我需要在选中 checkbox1 时隐藏 div1 并显示 div2

我使用了下面的代码，但它不起作用

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

Answer 1

相反，您可以使用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>