有这样的一个需求:对于一组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. 使用badblocks命令检测、修复硬盘坏道(待验证)

    今天我的新硬盘到了.暂时没想好怎么用它.可以把它装入光驱位硬盘架给G430用,也可以把它当成移动硬盘来用. 想起以前记录过一个badblocks的用法,用来检查坏道,这里再贴一遍备用. ####### ...

  2. javascript-dom文档对象模型1

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. 一:HTML DOM 树 ...

  3. Java基础92 MySQL插入当前系统时间

    1.时间格式 用yyyy表示年份(year). -- y  表示年的最后一位,yy 表示年的最后2位,yyy 表示年的最后3位,yyyy 用4位数表示年用MM表示月份(month).-- mm 用2位 ...

  4. Java @Override 注解

    @Override注解,不是关键字,但可以当关键字使用,可以选择添加这个注解,在你不留心重载而并非复写了该方法时,编译器就会产生一条错误:The method doh(Milhouse) of typ ...

  5. 当Python与数模相遇

    数模有一个题目要处理杭州自行车在每个站点可用数量和已经借出数量,这数据在www.hzbus.cn上可以获取,它是10分钟更新一次的.这些数据手动获取,需要不停的刷页面,从6:00am到9:00pm,显 ...

  6. How to return plain text from AWS Lambda & API Gateway

    With limited experience in AWS Lambda & API Gateway, it's struggling to find the correct way to ...

  7. Latex常用整理

    会不断更新添加,以便写论文的时候快速查找. 项目 带编号 \begin{enumerate} \setlength{\itemsep}{0pt} \setlength{\parsep}{0pt} \s ...

  8. 【AtCoder】AtCoder Petrozavodsk Contest 001

    A - Two Integers 如果\(X\)是\(Y\)的倍数的话不存在 可以输出\(X \cdot (\frac{Y}{gcd(X,Y)} - 1)\) 代码 #include <bits ...

  9. spark sql中保存数据的几种方式

    从官网来copy过来的几种模式描述: Scala/Java Python Meaning SaveMode.ErrorIfExists(default) "error"(defau ...

  10. 【Java】 大话数据结构(13) 查找算法(4) (散列表(哈希表))

    本文根据<大话数据结构>一书,实现了Java版的一个简单的散列表(哈希表). 基本概念 对关键字key,将其值存放在f(key)的存储位置上.由此,在查找时不需比较,只需计算出f(key) ...