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 实现类的多种方法实例
May 01 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
JS实现商品筛选功能
Aug 19 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
一段实用的php验证码函数
2016/05/19 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
js里面的变量范围分享
2020/07/18 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python爬取网易云音乐评论
2018/11/16 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
机关节能减排实施方案
2014/03/17 职场文书
成语的广告词
2014/03/19 职场文书
党员带头倡议书
2015/04/29 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis