在代码中添加一个 onclick 属性,使用引用 ClientID 的字符串参数调用 javascript 函数
本文关键字:ClientID 引用 字符串 函数 javascript 调用 参数 属性 添加 代码 onclick | 更新日期: 2023-09-27 17:55:40
我环顾四周,我找不到将它们组合在一起所需的所有部分。问题是我想从多个地方调用同一个 javascript 函数,所以我需要将元素的 ID 传递到函数中,以便我可以全部更改它们。这个想法很简单。我只希望四个复选框在单击时调用此函数,以便防止取消选中最后一个框。这是我到目前为止所拥有的。
.HTML:
<asp:CheckBox ID="cbBlue" Text="Blue" Checked="true" runat="server" />
<asp:CheckBox ID="cbGreen" Text="Green" Checked="true" runat="server" />
<asp:CheckBox ID="cbRed" Text="Red" Checked="true" runat="server" />
<asp:CheckBox ID="cbYellow" Text="Yellow" Checked="true" runat="server" />
<asp:HiddenField ID="hdnCheckCount" runat="server" Value="4" />
C#:
protected void Page_Load(object sender, EventArgs e)
{
cbBlue.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
cbGreen.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
cbRed.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
cbYellow.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
}
Javascript:
function checkCheck(elementID) {
if ($('#<%=hdnCheckCount.ClientID%>').val() == 1) {
elementID.prop("checked", true);
return;
}
else {
if (elementID.is(":checked")) {
elementID.prop("checked", false);
$('#<%=hdnCheckCount.ClientID%>').val($('#<%=hdnCheckCount.ClientID%>').val() - 1);
}
else {
elementID.prop("checked", true);
$('#<%=hdnCheckCount.ClientID%>').val($('#<%=hdnCheckCount.ClientID%>').val() + 1);
}
}
}
这可能吗?我接近了吗?另外,我有点不确定我是否需要在javascript中实际设置复选框的选中状态,因为我想这已经在其他地方处理过了。但是我不确定强制它为 true 是否有效,因为在 javascript 函数运行后它可能仍然未被选中。
由于实际上没有数据被传递到后端,我建议完全在javascript中执行此操作。因为我看到你正在使用jQuery,这就是我建议做的。
首先,向所有复选框添加一个类
<asp:CheckBox ID="cbBlue" CssClass="keepOneChecked" Text="Blue" Checked="true" runat="server" />
<asp:CheckBox ID="cbGreen" CssClass="keepOneChecked" Text="Green" Checked="true" runat="server" />
<asp:CheckBox ID="cbRed" CssClass="keepOneChecked" Text="Red" Checked="true" runat="server" />
<asp:CheckBox ID="cbYellow" CssClass="keepOneChecked" Text="Yellow" Checked="true" runat="server" />
然后使用 jQuery 绑定 onclick 事件
$(function(){
//bind event
$('.keepOneChecked').click(function(e){
//get all the checkboxes that ARE checked
//.keepOneChecked is applied to a span wrapping the input and label because of ASP
var $checked = $('.keepOneChecked input:checked');
if( $checked.length == 1){
//if there is only 1, disable it so you can't uncheck it
$checked.attr('disabled',true);
}
else{
//otherwise a second or more just got checked so enable all of them
$checked.attr('disabled',false);
}
});
});
至于你具体遇到的问题,我想当你有约束力的时候
cbRed.Attributes.Add("onclick", "checkCheck('#<%=this.ClientID%>')");
"this"被引用到页面而不是元素,而且语法是错误的。你可以试试:
cbRed.Attributes.Add("onclick", "checkCheck('"+cbRed.ClientID+"')");
看看这是否有效,但我会先尝试在 jQuery 中执行此操作。