JQuery勾选指定name的复选框集合并显示的方法


Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery勾选指定name的复选框集合并显示的方法。分享给大家供大家参考。具体实现方法如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
 $("input[name='love']").click(function () {
 //获得所有name为love的选中的复选框
 var $Checks = $("input[name='love']:checked");
 var arr = new Array();
 //使用了元素的each方法
 //循环Jquery对象里的dom数组
 $Checks.each(function (index, value) {
  //alert(value);
  arr[index] = value.value;
 });
 $("#MessageInfo").text("你选择了"+arr.length+"个爱好,"+arr.join(","));
 });
});
</script>
</head>
<body>
<input type="checkbox" name="love" value="FootBall" />足球
<input type="checkbox" name="love" value="BasketBall" />篮球
<input type="checkbox" name="love" value="VallyBall" />排球
<p id="MessageInfo"></p>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
解决vue scoped html样式无效的问题
Oct 24 Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
JQuery中上下文选择器实现方法
May 18 #Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 #Javascript
JQuery球队选择实例
May 18 #Javascript
JQuery实现动态添加删除评论的方法
May 18 #Javascript
TypeError document.getElementById(...) is null错误原因
May 18 #Javascript
JQuery实现带排序功能的权限选择实例
May 18 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP中cookie知识点学习
2018/05/06 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javascript 写类方式之四
2009/07/05 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python 调用Java实例详解
2017/06/02 Python
python中的数据结构比较
2019/05/13 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
求职简历推荐信范文
2013/12/02 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
远程研修随笔感言
2014/02/10 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书