这个的应用场景是需要在前台获取checkboxList的所选的值,然后作为dataService的参数传递为后台的方法。
在aspx页的界面显示代码如下:
<div> <label>请选择国家:</label> <asp:CheckBoxList ID="Cblist" runat="server"> <asp:ListItem Value="CN" Text="中国" /> <asp:ListItem Value="JP" Text="日本" /> <asp:ListItem Value="US" Text="美国" /> <asp:ListItem Value="UK" Text="英国" /> </asp:CheckBoxList> <input type="button" value="确定" onclick="getCheckBoxListSelectedVales()" /> </div>
但是在浏览器里边渲染过之后就成了这样子,从页面的渲染代码看,我们几乎看不出有什么特殊的属性来帮助我们获取被选中的项的值
<div> <label>请选择国家:</label> <table id="Cblist"> <tr> <td><input id="Cblist_0" type="checkbox" name="Cblist$0" value="CN" /><label for="Cblist_0">中国</label></td> </tr><tr> <td><input id="Cblist_1" type="checkbox" name="Cblist$1" value="JP" /><label for="Cblist_1">日本</label></td> </tr><tr> <td><input id="Cblist_2" type="checkbox" name="Cblist$2" value="US" /><label for="Cblist_2">美国</label></td> </tr><tr> <td><input id="Cblist_3" type="checkbox" name="Cblist$3" value="UK" /><label for="Cblist_3">英国</label></td> </tr> </table> <input type="button" value="确定" onclick="getCheckBoxListSelectedVales()" /> </div>
这个时候我们该如何去获取checkboxList的所选值呢?请看如下代码:
functiongetCheckBoxListSelectedVales() { varcblists=$("[id*=Cblist]"); varselected_value=newString(''); for (vari=0; i<cblists.length; i++) { if (cblists[i].checked) { if (selected_value!='') selected_value+=','; selected_value+=cblists[i].value; } } alert(selected_value); }
在以上代码中我们先通过$(“[id*=XXX]”)的方式进行过滤,这句代码的意思是过滤出所有id中包含XXX的元素,这样我们可以得到一个数组。然后F12在开放人员工具里,”脚本”,我们cblists添加监视,可以看到该数组中包含5个数组元素,点击其中某一元素,然后发现他们有一个checked的属性,同时还有value属性,这样我们就可以通过checked属性来判断该元素是否被选中,如果选中再获取其值。