选中复选框上的标签更新

时间:2014-12-05 16:40:02

标签: javascript checkbox

我在TabContainer控件中有一个gridview,它有一个复选框项。我正在触发javascript以显示一个警报,其中包含所选复选框的数量。

我现在想要使用所选复选框的计数更新屏幕上的标签文本,而不是显示警报,但我不知道如何引用标签。

见下面的代码。想法或指向我类似的帖子将不胜感激。

<asp:Content ID="Content4" ContentPlaceHolderID="MasterContent" runat="server">

<script type="text/javascript">

    function CheckBoxCount() {
        var gv = document.getElementById("<%= gv02ROLE.ClientID %>");
        var inputList = gv.getElementsByTagName("input");
        var numChecked = 0;

        for (var i = 0; i < inputList.length; i++) {
            if (inputList[i].type == "checkbox" && inputList[i].checked) {
                numChecked = numChecked + 1;
            }
        }
        alert(numChecked);            
        <<< set text value for ID="statusLabel1" to replace this alert >>>
    }
</script>         

<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" AutoPostBack="true">
.
<asp:TabPanel ID="TabREVROLE" runat="server" HeaderText="Open Review" Visible="false">
<ContentTemplate>
    .
    <asp:Label ID="statusLabel1" runat="server" Text=""></asp:Label>


    <asp:GridView ID="gv02ROLE" runat="server" AllowPaging="True"  
                      ShowHeaderWhenEmpty="True" AllowSorting="True" ShowHeader="true"
        .
        <asp:TemplateField HeaderText="Select" Visible="true" HeaderStyle-Width="10" 
                      ItemStyle-Width="10">
                        <ItemTemplate>
                            <asp:CheckBox ID="selCheck" runat="server" CssClass="mychk" 
                                   Checked="false" Enabled="true" 
                                    onClick="javascript:CheckBoxCount()"/>
                        </ItemTemplate>
                </asp:TemplateField>

3 个答案:

答案 0 :(得分:0)

document.getElementById("statusLabel1").value = numChecked

答案 1 :(得分:0)

为什么不简单:

function CheckBoxCount() {
    var gv = document.getElementById("<%= gv02ROLE.ClientID %>"),
        inputList = gv.querySelectorAll('input[type=checkbox]:checked'),
        textProp = 'textContent' in document ? 'textContent' : 'innerText';

    document.getElementById('statusLabel1')[textProp] = inputList.length;
}

参考文献:

答案 2 :(得分:0)

我简要地看到了一个关于此问题的初步答案:

`document.getElementById('<%=statusLabel1.ClientID%>').innerHTML = numChecked`

此解决方案有效。感谢