Question

我的index.html文件中有一个Checkbox

@Html.CheckBoxFor(m=>m.isChecked, new { id = "isChecked" })  

<div id='Shipping'> 
      <p> Some textboxes here </p>
</div>

如果选中该复选框，我想隐藏啜饮的div，如果未选中则取消隐藏。我希望它是动态的。我怎么做？

Answer 1

我猜您首先绑定到复选框change事件：

$('#isChecked').change(function() {
    //...
});

在该事件处理程序中，您将根据复选框的状态显示/隐藏div。可能是这样的：

if ($(this).is(':checked')) {
    $('#Shipping').show();
} else {
    $('#Shipping').hide();
}

当然，您还需要设置初始值。完成这两者的简单方法可能是将逻辑包装在函数中：

var toggleDiv = function () {
    if ($('#isChecked').is(':checked')) {
        $('#Shipping').show();
    } else {
        $('#Shipping').hide();
    }
}

然后从上面的事件处理程序中调用它：

$('#isChecked').change(toggleDiv);

页面加载时也是如此：

toggleDiv();

Answer 2

您只需将change事件绑定到复选框并检查其:checked选择器，以确定div是否需要显示或隐藏。

<script>
$().ready(function(){
  $('#isChecked').change(function()
   {
     $(this).is(":checked") ? $("#Shipping").show() : $("#Shipping").hide();
   }).change(); // optional
  });
</script>

Answer 3

的javascript：

$('#isChecked').change(function(){
    if($(this).is(":checked")) {
        $(this).removeClass("hide");
    } else {
        $(this).addClass("hide");
    }
});

的CSS：

.hide{ display:none;}

HTML：

<div id='Shipping' class='hide'> </div>

Answer 4

$('#isChecked').change(function(){
    if($(this).is(":checked")) {
        $("#Shipping").hide()
    } else {
      $("#Shipping").show()
    }
});

如何使用javascript隐藏/取消隐藏div？

4 个答案: