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

 更新时间:2015年05月18日 11:28:38   作者:永远爱好写程序  
这篇文章主要介绍了JQuery勾选指定name的复选框集合并显示的方法,涉及jQuery表单元素操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • jquery对表单操作2

    jquery对表单操作2

    jquery对表单操作2,最近几篇整理都是jquery表格操作相关,大家可以收藏下。
    2011-04-04
  • 基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)

    基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)

    上次发了几个jQuery的插件和些心得, 很多园友(也许是自己站上的)发邮件希望能提供更多的源码, 正好这次有个同学希望在自己的坛子上挂个图片裁剪以生成头像的功能, 于是帮忙写了这么个插件.也许很多园友用得着, 就一并发上来啦.
    2011-09-09
  • jQuery中常用的遍历函数用法实例总结

    jQuery中常用的遍历函数用法实例总结

    这篇文章主要介绍了jQuery中常用的遍历函数用法,以实例形式分析并总结了jquery中常见的遍历函数使用方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)

    jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)

    瀑布流-绝对定位布局,与浮动布局的区别在于布局不一样,AJAX不一样
    2012-05-05
  • jQuery ui 1.7更新小结

    jQuery ui 1.7更新小结

    因为要给新员工进行培训jQuery.UI方面的内容,我之前学习的都是jquery.ui-1.6b的,现在的版本升级到jquery-ui-1.7.1,除了样式上有很大调整以外,API也有了很大的变化。
    2009-08-08
  • jQuery网页定位导航特效实现方法

    jQuery网页定位导航特效实现方法

    这篇文章主要介绍了jQuery网页定位导航特效实现方法,结合实例形式分析了jQuery网页定位导航的功能描述、原理与核心实现代码,需要的朋友可以参考下
    2016-12-12
  • jquery实现简单每周轮换的日历

    jquery实现简单每周轮换的日历

    这篇文章主要为大家详细介绍了jquery实现简单每周轮换的日历,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • jQuery代码实现表格中点击相应行变色功能

    jQuery代码实现表格中点击相应行变色功能

    对于一个表格,为了更好的用户体验度,需要把选中的表格项添加高亮,下面小编给大家介绍使用jquery实现表格中点击相应行变色功能的实例代码,需要的朋友参考下
    2016-05-05
  • jQuery实现日期联动效果实例

    jQuery实现日期联动效果实例

    这篇文章主要介绍了jQuery实现日期联动效果的方法,结合实例形式分析了jQuery针对日期及页面元素动态操作的相关技巧,需要的朋友可以参考下
    2016-07-07
  • jQuery.ajax 用户登录验证代码

    jQuery.ajax 用户登录验证代码

    jQuery.ajax 用户登录验证代码,需要的朋友可以参考下。
    2010-10-10

最新评论