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的面向对象方法以及差别
Mar 31 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
Java中Timer的用法详解
Oct 21 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python实现ID3决策树算法
2018/08/29 Python
如何基于Python批量下载音乐
2019/11/11 Python
Django nginx配置实现过程详解
2020/09/10 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
自主招生自荐信格式
2015/03/04 职场文书
教师师德表现自我评价
2015/03/05 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书