有这样的一个需求:对于一组checkbox,当点击每个checkbox后,把当前处于选中状态的checkbox的某个属性值取出来连接成字符串,并以逗号分开。

html部分:

    <input type="checkbox" id="1"/>
    <label for="1">选项一</label>
    <br/>
    <input type="checkbox" id="2"/>
    <label for="2">选项二</label>
    <br />
    <input type="checkbox" id="3"/>
    <label for="3">选项三</label>
    <br/>
    <span id="result"></span>

jQuery部分,给每个checkbox定义点击事件,遍历所有选中的checkbox。

        $(function() {
            $("input[type=checkbox]").on("click", function () {
                var vIds = "";
                $("input:checked").each(function() {
                    vIds += $(this).attr('id') + ",";
                });

                if (vIds.length > 0) {
                    vIds = vIds.substring(0, vIds.length - 1);
                }

                $('#result').text(vIds);
            });
        });

jQuery把所有被选中的checkbox的某个属性值连接成字符串的更多相关文章

  1. jquery 中获取所有选中的checkbox的用法

    以往还错误的把$("input[type='checkbox'][checked]") 是正确的用法,奇怪的是:这样用之前确实是好用的,单当我页面中的html内容超过1000行时, ...

  2. jquery获取复选框(checkbox)的选中值(一组和单个)

    使用jquery获取一组或者单个checkbox的选中状态的值.下面通过一个示例进行说明,假设现有一页面有一组checkbox的name的值为id,那么获取这组name=id的checkbox的值的方 ...

  3. jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...

  4. Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关

    常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐 ...

  5. (转载)jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...

  6. JQuery获取被选中的checkbox的value值

    文章源头:http://www.cnblogs.com/td960505/p/6123510.html 以下为使用JQuery获取input checkbox被选中的值代码: <html> ...

  7. 使用JQuery获取被选中的checkbox的value值 以及全选、反选

    以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> & ...

  8. jQuery设置 select、radio、checkbox 默认选中的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. ARM linux内核启动时几个关键地址【转】

    转自:http://www.cnblogs.com/armlinux/archive/2011/11/06/2396787.html 1.       内核启动地址1.1.   名词解释ZTEXTAD ...

  2. re模块逐步进阶

    Windows 10家庭中文版,Python 3.6.4, 正则表达式,自己一直的水平是 知道,但不熟悉,简单的也能写,复杂的就需要看资料了,距离灵活运用还是差那么一些的. 于是,今天(180831) ...

  3. Python_oldboy_自动化运维之路_面向对象(十)

    面向对象编程 OOP编程是利用“类”和“对象”来创建各种模型来实现对真实世界的描述,使用面向对象编程的原因一方面是因为它可以使程序的维护和扩展变得更简单,并且可以大大提高程序开发效率 ,另外,基于面向 ...

  4. .NetCore 使用Zipkin 分布式服务追踪监控服务性能

    参考资料 https://zipkin.io/ https://github.com/openzipkin/zipkin/ https://github.com/openzipkin/zipkin4n ...

  5. 如何区分prometheus中Histogram和Summary类型的metrics?

    要理解它们的区别,关键还是告业务应用. 但如何在学习时,如何区分呢? 有以下几个维度: histogram有bucket,summary在quatile. summary分位数是客户端计算上报,his ...

  6. 【推荐】关于JS中的constructor与prototype【转】

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  7. 恢复spark挂掉的节点

    背景: 某个Worker节点挂掉了,我们需要将Worker进行启动恢复,同时可以恢复streaming中的executor 解决办法: 其实很简单,去worker节点中执行sbin/start-sla ...

  8. https://maven.google.com 连接不上的解决办法(转)

     版权声明:本文为博主原创文章,未经博主允许请火速转载. https://blog.csdn.net/a06_kassadin/article/details/72796696 Update 今天看了 ...

  9. kafka配置监控和消费者测试

    概念 运维 配置 监控 生产者与消费者 流处理 分区partition 一定条件下,分区数越多,吞吐量越高.分区也是保证消息被顺序消费的基础,kafka只能保证一个分区内消息的有序性 副本 每个分区有 ...

  10. Python3 计算相关系数

    # -*- coding: utf-8 -*- """ Created on Mon Jan 8 19:36:48 2018 @author: markli " ...