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 声明全局变量的三种方式详解
May 07 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
基于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一些公用函数的集合
2008/03/27 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python 图片验证码代码分享
2012/07/04 Python
python对数组进行反转的方法
2015/05/20 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
初三物理教学反思
2014/01/21 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
个人批评与自我批评
2014/10/15 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技