Question

我在我的radgrid中使用Gridclientselectcoiumn。我的commanditemtemplate中有一个标签。当用户选中复选框时，我只想显示该标签中选中的复选框数。假设如果用户选择4个复选框，我只想显示为选定记录：4。这是我的代码......

commanditemtemplate

<td align="right" style="width: 20%">
    Selected Records:<asp:Label ID="lblselTsks" Width="20px" Font-Size="10pt" Font-Bold="true" runat="server" Text="0"></asp:Label>
</td>

网格客户端选择列。

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="3%"
                                ItemStyle-Width="3%">
    <HeaderStyle Width="3%"></HeaderStyle>
    <ItemStyle Width="3%"></ItemStyle>
</telerik:GridClientSelectColumn>

codebehind和JS

protected void rg200_DataBound(object sender, EventArgs e)
{
    foreach (GridDataItem item in rg200.MasterTableView.Items)
    {
        CheckBox chkBoxOne = (CheckBox)item.FindControl("ClientSelectColumn");
        if (chkBoxOne != null)
            chkBoxOne.Attributes.Add("onclick", "javascript:return SelectOne('" + chkBoxOne.ClientID + "')");
    }
}

function SelectOne(id) {
    var count = 0;
    count = Number(document.getElementById('ctl00_PagePlaceholder_rg200_ctl00_ctl02_ctl00_lblselTsks').innerHTML);
    if (document.getElementById(id).checked == true) {
        if (!document.getElementById(id).disabled) {
            count = count + 1;
        }
    }
    else if (document.getElementById(id).checked == false) {
        if (!document.getElementById(id).disabled) {
            count = count - 1;
        }
    }
    document.getElementById('ctl00_PagePlaceholder_rg200_ctl00_ctl02_ctl00_lblselTsks').innerHTML = count;
}

问题是当我选择1或更多的复选框时，所选的复选框计数不会显示。它总是显示选定的记录：0。我在哪里做错了？如何解决此问题。任何帮助应该被赞赏。

Answer 1

在选中复选框时，您是否使用Firebug等工具验证是否正在调用SelectOne函数？那将是第一步。

第二步，如果正在调用该函数，请逐步执行JS（再次使用Firebug之类的工具），并确保计数正在递增。

您的代码没有明显错误。你考虑过使用jQuery吗？这可以简化您的代码并使其更容易准备。您可以使用document.getElementById(id)而不是$(id)。

除非您在标签服务器端执行某项操作，否则可以使用简单的HTML <span>或<div>替换asp：Label，然后设置更清晰的客户端ID。例如：

<span id="spanCounter" style="width:20px;font-weight:bold;"></span>

然后在代码中，您可以将“ctl00_PagePlaceholder ...”减少为：

$("#spanCounter").html(counter); //Sets the HTML content using jQuery

希望有所帮助。

如何在选中复选框列时调用Javascript函数

1 个答案: