jQuery实现遍历复选框的方法示例


Posted in Javascript onMarch 06, 2017

本文实例讲述了jQuery实现遍历复选框的方法。分享给大家供大家参考,具体如下:

1、问题背景:

这里有10个复选框,根据选择的复选框获取其值,并将其值用“——”连接,插入到div中

2、实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>遍历复选框</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <script>
      $(document).ready(function(){
        $("#btn").click(function(){
          var str = "";
          $("input[name='ckb']").each(function(){
            if($(this).is(":checked"))
            {
              str += "——" + $(this).val();
            }
          });
          $("#txt").html(str);
        });
      });
    </script>
  </head>
  <body>
    <div>
      <input type="checkbox" name="ckb" value="1" />1
      <input type="checkbox" name="ckb" value="2" />2
      <input type="checkbox" name="ckb" value="3" />3
      <input type="checkbox" name="ckb" value="4" />4
      <input type="checkbox" name="ckb" value="5" />5
      <input type="checkbox" name="ckb" value="6" />6
      <input type="checkbox" name="ckb" value="7" />7
      <input type="checkbox" name="ckb" value="8" />8
      <input type="checkbox" name="ckb" value="9" />9
      <input type="checkbox" name="ckb" value="10" />10<br>
      <input type="button" id="btn" value="遍历"/>
      <div id="txt"></div>
    </div>
  </body>
</html>

3、运行效果图:

jQuery实现遍历复选框的方法示例

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

Javascript 相关文章推荐
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
原生JS轮播图插件
Feb 09 Javascript
jquery replace方法去空格
May 08 jQuery
创建简单的node服务器实例(分享)
Jun 23 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 #Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 #Javascript
jQuery简单实现遍历单选框的方法
Mar 06 #Javascript
jQuery在header中设置请求信息的方法
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 #Javascript
jquery获取select,option所有的value和text的实例
Mar 06 #Javascript
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python多线程爬虫简单示例
2016/03/04 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
django中静态文件配置static的方法
2018/05/20 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Django  ORM 练习题及答案
2019/07/19 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
电气专业应届生求职信
2013/11/01 职场文书
领导视察欢迎词
2014/01/15 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
搞笑的获奖感言
2014/08/16 职场文书
五四青年节的活动方案
2014/08/20 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
接收函格式
2015/01/30 职场文书
小学班主任自我评价
2015/03/11 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python