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 相关文章推荐
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
Vue Element plus使用方法梳理
Dec 24 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php实现读取超大文件的方法
2014/07/28 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
原生JS实现留言板
2020/03/26 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python中的decorator的作用详解
2018/07/26 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
基于python的列表list和集合set操作
2019/11/24 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
css3中transition属性详解
2014/09/02 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
vue路由实现登录拦截
2021/03/24 Vue.js
房屋租赁协议书
2014/04/10 职场文书
操行评语大全
2014/04/30 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
聘用意向书
2014/07/29 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
绿里奇迹观后感
2015/06/15 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL