javascript获得CheckBoxList选中的数量


Posted in Javascript onOctober 27, 2009

jQuery的选择器真的好强大,好灵活。 javascript的原始方法也值得研究。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxList.aspx.cs" Inherits="CheckBoxList" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>获得CheckBoxList选中的数量(jQuery与Javascript对照学习/前台与后台)</title> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
//jQuery的方法(王君) 
$(function(){ 
$("#chkBox").click(function(){ 
alert($("#chkBox input[@type=checkbox]:checked").size()); 
}); 
}); 
//javacript方法(候林) 
function f(){ 
var a=document.getElementsByTagName('input') 
var num=0; 
for(var i=0;i<a.length;i++){ 
if(a[i].type=='checkbox'){ 
if(a[i].checked==true) 
num+=1; 
} 
} 
alert(num); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
jQuery的选择器真的好强大,好灵活。<br /> 
javascript的原始方法也值得研究。 
</div> 
<div> 
<input type="button" value="Javascript取值" onclick="f();" /> 
<asp:CheckBoxList ID="chkBox" runat="server"> 
<asp:ListItem>1</asp:ListItem> 
<asp:ListItem>2</asp:ListItem> 
<asp:ListItem>3</asp:ListItem> 
</asp:CheckBoxList> 
<asp:Button ID="btnOk" runat="server" OnClick="btnOk_Click" Text="服务器端取" /> 
</div> 
</form> 
</body> 
</html>
using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
public partial class CheckBoxList : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
} 
protected void btnOk_Click(object sender, EventArgs e) 
{ 
int totalNum = 0;//总数 
string list = "000";//选中的值 
for (int i = 0; i < this.chkBox.Items.Count; i++) 
{ 
if (chkBox.Items[i].Selected) 
{ 
totalNum += 1; 
list += "," + chkBox.Items[i].Value; 
} 
} 
Response.Write(totalNum.ToString() + "|" + list); 
} 
}
Javascript 相关文章推荐
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
基于jQuery的日期选择控件
html 锁定页面(js遮罩层弹出div效果)
Oct 27 #Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 #Javascript
Ajax+Json 级联菜单实现代码
Oct 27 #Javascript
javascript 关于# 和 void的区别分析
Oct 26 #Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 #Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 #Javascript
You might like
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python书单 不将就
2017/07/11 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Django之路由层的实现
2019/09/09 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
linux面试题参考答案(6)
2016/06/23 面试题
4s客服专员岗位职责
2013/12/01 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
趣味运动会策划方案
2014/06/02 职场文书
家长学校教学计划
2015/01/19 职场文书
2015年防汛工作总结
2015/05/15 职场文书
家长反馈意见及建议
2015/06/03 职场文书
征求意见函
2015/06/05 职场文书
科技馆观后感
2015/06/08 职场文书
单身证明格式样本
2015/06/15 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js