Javascript 操作服务器控件 CheckBoxList

最近得到一个需求：

1. 在ASP.NET页面里有个TextBox 和一个CheckBoxList.

2. 当TextBox用户扫描进一个字符串，会与CheckBoxList的ListItem的值比较，如果相等，就把相应的ListItem勾选上。

 

参考一下网上的方法，是会在页面加载是，给CheckBoxList 加个属性，在页面编译成Html时，属性会放到Span 标签里，然后你就可以取值了。

 

<table id="cblTest" border="0" style="background-color:#CCFFFF;width:158px;">
	<tr>
		<td><span ItemValue="001"><input id="cblTest_0" type="checkbox" name="cblTest$0" /><label for="cblTest_0">001</label></span></td>
	</tr><tr>
		<td><span ItemValue="002"><input id="cblTest_1" type="checkbox" name="cblTest$1" /><label for="cblTest_1">002</label></span></td>
	</tr><tr>
		<td><span ItemValue="003"><input id="cblTest_2" type="checkbox" name="cblTest$2" /><label for="cblTest_2">003</label></span></td>
	</tr>
</table>

 

 

后来， 想了下，其实，直接取值也可以取到的，只要取子节点的innerText值就行了。

 

<table id="cblTest" border="0" style="background-color:#CCFFFF;width:158px;">
	<tr>
		<td><input id="cblTest_0" type="checkbox" name="cblTest$0" /><label for="cblTest_0">001</label></td>
	</tr><tr>
		<td><input id="cblTest_1" type="checkbox" name="cblTest$1" /><label for="cblTest_1">002</label></td>
	</tr><tr>
		<td><input id="cblTest_2" type="checkbox" name="cblTest$2" /><label for="cblTest_2">003</label></td>
	</tr>		
</table>

 

 

下面，是javascript代码：

<script type="text/javascript" language="javascript">
    
        function check() {
            var oCBList = document.getElementById("<%=cblTest.ClientID %>");
            var tds = oCBList.getElementsByTagName("td");
            var inputs = oCBList.getElementsByTagName("input");
            
            var oTextBox = document.getElementById("tbTest");

            for (var i = 0; i < tds.length; i++) {
                if (oTextBox.value == tds[i].childNodes[1].innerText) {
                    inputs[i].checked = true;
                }       
            
            }

        }

        function checkAll() {
            var oCBList = document.getElementById("<%=cblTest.ClientID %>");
            var inputs = oCBList.getElementsByTagName("input");


            for (var i = 0; i < inputs.length; i++) {

                inputs[i].checked= true;

            }

        }

        function unCheckAll() {
            var oCBList = document.getElementById("<%=cblTest.ClientID %>");
            var inputs = oCBList.getElementsByTagName("input");


            for (var i = 0; i < inputs.length; i++) {

                inputs[i].checked = false;

            }

        }
    </script>

html 代码：

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="tbTest" runat="server"></asp:TextBox>  
        <input id="Button3" type="button" value="Check" onclick="check();"/><br />
        <br />
        <input id="Button1" type="button" value="Html_CheckAll" onclick="checkAll();" />  
        <asp:Button ID="Button2" runat="server" Text="Aspx_UnCheckAll" OnClientClick="unCheckAll();" />
        <br />
    </div>
    <asp:CheckBoxList ID="cblTest" runat="server" Width="158px" BackColor="#CCFFFF">
        <asp:ListItem>001</asp:ListItem>
        <asp:ListItem>002</asp:ListItem>
        <asp:ListItem>003</asp:ListItem>
        <asp:ListItem>004</asp:ListItem>
        <asp:ListItem>005</asp:ListItem>
    </asp:CheckBoxList>
    </form>

function check() ：
1. 先通过 oCBList.getElementsByTagName("td"); 来确定CheckBoxList在Client产生的所有的<TD>标签
2. 并循环取childNodes[1].innerText的值，即<label>的innerText，并与CheckBox的值比较
3. 当两者值相等，勾选值inputs[i].checked= true （var inputs = oCBList.getElementsByTagName("input");）