编程 Javascript

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程序设计有所帮助。

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

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript getElementsByClassName实现代码

Oct 11 Javascript

通过Javascript创建一个选择文件的对话框代码

Jun 16 Javascript

js jquery验证银行卡号信息正则学习

Jan 21 Javascript

javascript中怎么做对象的类型判断

Nov 11 Javascript

基于jQuery的Web上传插件Uploadify使用示例

May 19 Javascript

AngularJS实现分页显示数据库信息

Jul 01 Javascript

百度搜索框智能提示案例jsonp

Nov 28 Javascript

浅谈javascript中的数据类型转换

Dec 27 Javascript

让div运动起来 js实现缓动效果

Jul 06 Javascript

使vue实现jQuery调用的两种方法

May 12 jQuery

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

Dec 30 Vue.js

JavaScript声明变量和数据类型的转换

Apr 12 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