编程 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 相关文章推荐

JS获取scrollHeight问题想到的标准问题

May 27 Javascript

P3P Header解决Cookie跨域的问题

Mar 12 Javascript

jquery清空表单数据示例分享

Feb 13 Javascript

实例讲解JS中setTimeout()的用法

Jan 28 Javascript

jQuery 中的 DOM 操作

Apr 26 Javascript

jQuery Easyui 下拉树组件combotree

Dec 16 Javascript

jQuery实现移动端Tab选项卡效果

Mar 15 Javascript

使用原生js封装的ajax实例(兼容jsonp)

Oct 12 Javascript

详解Vue 中 extend 、component 、mixins 、extends 的区别

Dec 20 Javascript

浏览器调试动态js脚本的方法(图解)

Jan 19 Javascript

vue实现密码显示与隐藏按钮的自定义组件功能

Apr 23 Javascript

详解Vue3中对VDOM的改进

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