您好,欢迎来到点滴吧! 手机版
点滴吧www.diandiba.com
记录点点滴滴,尽在点滴吧
  • 文章
  • 文章
  • 特效
  • 素材
  • 景点
您现在的位置:首页 > JavaScript教程 > 文章正文
JS获取checkboxList所选的值
更新时间:2015/1/17 16:35:27   点击:3443次

  这个的应用场景是需要在前台获取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属性来判断该元素是否被选中,如果选中再获取其值。

相关文章
导航分类
热门文章
关于我们| 联系我们| 免责声明| 网站地图|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2