Question

我需要隐藏div1并在检查div2时显示checkbox1

我使用了以下代码，但它无法正常工作

<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更新：

@USERID is not null

使用Javascript：

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

如果您只想使用CSS，而是在复选框中添加一个类或ID，并使用<script type="text/javascript"> function valueChanged() { if ($("#checkbox1").is(":checked")) { $("#div2").show(); $("#div1").hide(); } else { $("#div1").show(); $("#div2").hide(); } } </script>选择器。您还需要删除div2上的内联显示无。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您使用不正确的元素访问

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

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

4 个答案: