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

问题描述：

我有我的index.html文件一个复选框为如何使用javascript隐藏/取消隐藏div？

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

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

我想隐藏喝着DIV如果复选框被选中，如果没有选中取消隐藏。我希望它是动态的。我怎么做？

在整个互联网上，有成千上万的这个问题的解决方案。这个问题只是懒惰 – Liam

答

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

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

谢谢。这解决了我的问题 – MSH

当然。乐意效劳：） – DinoMyte

答

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

答

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

答

我想你首先绑定到该支票博X的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();

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

相关推荐