Javascript如何获取CheckBoxList的value

在开发工作中，因为要做用到CheckBoxList在客户端用js操作，无论js怎样调试，就是无法获取value的值，很是郁闷，后来Google了下，去了趟CodeProject，算是幸运的。我们在网页上放置一下代码：

<ASP:CheckBoxList runat="server" ID="chkDemo" RepeatDirection="Horizontal" RepeatLayout="Flow">    <ASP:ListItem Text="测试A" Value="A"></asp:ListItem>    <ASP:ListItem Text="测试B" Value="B"></asp:ListItem>    <ASP:ListItem Text="测试C" Value="C"></asp:ListItem>    <ASP:ListItem Text="测试D" Value="D"></asp:ListItem>    <ASP:ListItem Text="测试E" Value="E"></asp:ListItem></ASP:CheckBoxList>

当浏览器呈现这段代码后，我们再看看是什么样的HTML脚本：

<table id="chkDemo" border="0">    <tr>        <td><input id="chkDemo_0" type="checkbox" name="chkDemo$0" /><label for="chkDemo_0">测试A</label></td>

        <td><input id="chkDemo_1" type="checkbox" name="chkDemo$1" /><label for="chkDemo_1">测试B</label></td>

        <td><input id="chkDemo_2" type="checkbox" name="chkDemo$2" /><label for="chkDemo_2">测试C</label></td>

        <td><input id="chkDemo_3" type="checkbox" name="chkDemo$3" /><label for="chkDemo_3">测试D</label></td>

        <td><input id="chkDemo_4" type="checkbox" name="chkDemo$4" /><label for="chkDemo_4">测试E</label></td>    </tr></table>

这段HTML脚本会因为RepeatLayout的设置有所差异，但是都有一个共同点，就是 生成的CheckBox没有value属性，

所以在客户端用js是没办法获取值的

为了解决这个问题，我们需要扩展一下CheckBoxList：这是我在CodeProject上找到的源码，时间久了，链接就不贴了吧。

[ToolboxData("<{0}:CheckBoxListEx runat=\"server\"></{0}:CheckBoxListEx>")]public class CheckBoxListEx : CheckBoxList,IRepeatInfoUser{    void IRepeatInfoUser.RenderItem(ListItemType itemType, int repeatIndex, RepeatInfo repeatInfo, HTMLTextWriter writer)    {       string clientID = UniqueID + this.ClientIDSeparator + repeatIndex.ToString(NumberFormatInfo.InvariantInfo); //var       writer.WriteBeginTag("input");       writer.WriteAttribute("type", "checkbox");       writer.WriteAttribute("name", UniqueID + this.IdSeparator + repeatIndex.ToString(NumberFormatInfo.InvariantInfo));       writer.WriteAttribute("id", clientID);       writer.WriteAttribute("value", Items[repeatIndex].Value);       if (Items[repeatIndex].Selected)            writer.WriteAttribute("checked", "checked");       System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes;       foreach (string key in attrs.Keys)       {          writer.WriteAttribute(key, attrs[key]);       }       writer.Write("/>");       writer.Write("<label for='" + clientID + "'>");        writer.Write(Items[repeatIndex].Text);       writer.Write("</label>");     }

}

上边的这段代码是我经过修改的，与原著中有些差别：clientID的生成以及Checked属性的添加等，我想这段代码不需要再详细的讲解了吧。

把它编译成单独的类，在Toolbox上会自动出现，像使用那个正常的CheckBoxList一样，拖动到页面就可以了。

在客户端，我们js取值大致如下：

<script>

function getDemoValue()

{       var els = document.getElementById("chkDemo");       var vals= '';       if (els != null) {           var chks = els.getElementsByTagName("input");           for (var k = 0, len = chks.length; k < len; k++) {               var chk = chks[k];               if (chk != null && chk.type == 'checkbox' && chk.checked) {                   vals+= ',' + chk.value;               }           }       }

       if(vals.length>1)

          vals = vals.substring(1);

       return vals;

}   </script>