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

Answer 2

如果您想保留它基於JS的邏輯，那是不正確的。 以下更正：

HTML更新：

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

如果您只想使用CSS來實現，則也可以在復選框中添加類或ID，並使用~選擇器。 您還希望刪除div2上的嵌入式顯示。

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

Answer 3

您的代碼不正確。 應該是這樣的：

 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> 

Answer 4

您使用的元素訪問不正確

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