使用 Javascript 处理 OnCheckedChanged 复选框事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18549366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling OnCheckedChanged Checkbox Event with Javascript
提问by bsivel
I have the following javascript function that I want to call on the check or uncheck of a checkbox:
我有以下 javascript 函数，我想在选中或取消选中复选框时调用它：
<script language="javascript" type="text/javascript">
function showHideDropDowns() {
var check = document.getElementById('<%= cbShowHideDDLs %>')
if (check.checked) {
document.getElementById('<%=ddlVendor%>').style.visibility = 'visible';
document.getElementById('<%=ddlItem%>').style.visibility = 'visible';
document.getElementById('<%=ddlorigin%>').style.visibility = 'visible';
document.getElementById('<%=tbVendor%>').style.visibility = 'hidden';
document.getElementById('<%=tbItems%>').style.visibility = 'hidden';
document.getElementById('<%=tbOrigin%>').style.visibility = 'hidden';
}
else {
document.getElementById('<%=ddlVendor%>').style.visibility = 'hidden';
document.getElementById('<%=ddlItem%>').style.visibility = 'hidden';
document.getElementById('<%=ddlorigin%>').style.visibility = 'hidden';
document.getElementById('<%=tbVendor%>').style.visibility = 'visible';
document.getElementById('<%=tbItems%>').style.visibility = 'visible';
document.getElementById('<%=tbOrigin%>').style.visibility = 'visible';
}
}
</script>
Trying to add and attribute using OnCheckedChanged or OnClick has not worked:
尝试使用 OnCheckedChanged 或 OnClick 添加和属性不起作用：
<asp:CheckBox ID="cbShowHideDDLs" runat="server" Text="Show Lists" />
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
cbShowHideDDLs.Attributes.Add("onclick", "showHideDropDowns();");
//cbShowHideDDLs.Attributes.Add("OnCheckedChanged","showHideDropDowns();");
}
}
回答by Mt. Schneiders
Try this:
试试这个：
<asp:CheckBox ID="cbShowHideDDLs" ... onclick="showHideDropDowns(checkbox)" />
If you want to get an UserControl element on the client side, you need to use its ClientID. So, changing your javascript function to :
如果要在客户端获取 UserControl 元素，则需要使用其 ClientID。因此，将您的 javascript 函数更改为：
<script language="javascript" type="text/javascript">
function showHideDropDowns(checkbox) {
if (checkbox.checked) {
document.getElementById('<%=ddlVendor.ClientID %>').style.visibility = 'visible';
document.getElementById('<%=ddlItem.ClientID %>').style.visibility = 'visible';
document.getElementById('<%=ddlorigin.ClientID %>').style.visibility = 'visible';
document.getElementById('<%=tbVendor.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%=tbItems.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%=tbOrigin.ClientID %>').style.visibility = 'hidden';
}
else {
document.getElementById('<%=ddlVendor.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%=ddlItem.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%=ddlorigin.ClientID %>').style.visibility = 'hidden';
document.getElementById('<%=tbVendor.ClientID %>').style.visibility = 'visible';
document.getElementById('<%=tbItems.ClientID %>').style.visibility = 'visible';
document.getElementById('<%=tbOrigin.ClientID %>').style.visibility = 'visible';
}
}
</script>
回答by Aarif Qureshi
try this
试试这个
cbShowHideDDLs.Attributes.Add("onclick", "javascript:showHideDropDowns();");
回答by afzalulh
If you don't mind using jQuery, you can do like this:
如果你不介意使用 jQuery，你可以这样做：
<script src="Scripts/jquery-2.0.3.js"></script> <%-- Add jQuery reference --%>
<script type="text/javascript">
$(document).ready(function () {
$("input:checkbox[name$='cbShowHideDDLs']").click(function () {
var defvisible = this.checked? 'hidden' : 'visible';
var defhidden = this.checked ? 'visible' : 'hidden';
$('#<%=ddlVendor.ClientID %>').css('visibility', defvisible);
$('#<%=ddlItem.ClientID %>').css('visibility', defvisible);
$('#<%=ddlorigin.ClientID %>').css('visibility', defvisible);
$('#<%=tbVendor.ClientID %>').css('visibility', defhidden);
$('#<%=tbItems.ClientID %>').css('visibility', defhidden);
$('#<%=tbOrigin.ClientID %>').css('visibility', defhidden);
});
});
</script>
And there's no need to bind any function to onclick of the checkbox for this.
并且不需要为此将任何函数绑定到复选框的 onclick。
