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

我需要隐藏

div1

并在选中

checkbox1

时显示

div2

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

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

函数值已更改（）{
如果（$（'.checkbox1'）。是（“：checked”））
$（“.div2”）.show（）；
其他的
$（“.div1”）.hide（）；
}

Html

节目组1
节目组2

您对元素使用了不正确的访问权限

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

函数值已更改（）{
如果（$（this）.is（“：checked”））
$（“#div2”）.show（）；
其他的
$（“#div1”）.hide（）；
}

您对元素使用了不正确的访问权限

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

函数值已更改（）{
如果（$（this）.is（“：checked”））
$（“#div2”）.show（）；
其他的
$（“#div1”）.hide（）；
}

相反，您可以使用

切换（）


函数值已更改（）{
$（'.row'）.toggle（）；
}

节目组1
改为显示Div 2
，您只需使用
toggle（）


函数值已更改（）{
$（'.row'）.toggle（）；
}

节目组1
Show Div 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>

如果你想让它基于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>

您的代码不正确。应该是这样的:


函数值已更改（）{
如果（$（'#checkbox1'）。是（“：checked”））{
$（“#div1”）.hide（）；
$（“#div2”）.show（）；
}否则{
$（“#div1”）.show（）；
$（“#div2”）.hide（）；
}
}
//或者您可以只使用toggle（）
函数值changed2（）{
$（'.row'）.toggle（）；
}

节目组1
Show Div 2
您的代码不正确。应该是这样的:


函数值已更改（）{
如果（$（'#checkbox1'）。是（“：checked”））{
$（“#div1”）.hide（）；
$（“#div2”）.show（）；
}否则{
$（“#div1”）.show（）；
$（“#div2”）.hide（）；
}
}
//或者您可以只使用toggle（）
函数值changed2（）{
$（'.row'）.toggle（）；
}

节目组1
显示第2部分
#div2 { display:none; }
#checkbox:checked ~ #div1 { display:none; }
#checkbox:checked ~ #div2 { display:block; }