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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
vue-router的两种模式的区别
May 30 Javascript
JS中async/await实现异步调用的方法
Aug 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
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
jquery简易手风琴插件的封装
2020/10/13 jQuery
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
python正则表达式之作业计算器
2016/03/18 Python
python使用turtle库绘制树
2018/06/25 Python
python保存网页图片到本地的方法
2018/07/24 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
行政专员岗位职责
2014/01/02 职场文书
学习新党章思想汇报
2014/01/09 职场文书
应届护士求职信范文
2014/01/26 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
人事经理岗位职责
2014/04/28 职场文书
档案信息化建设方案
2014/05/16 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
提档介绍信范文
2015/10/22 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python