有这样的一个需求:对于一组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. http和socket之长连接和短连接区别【转】

    转自:https://blog.csdn.net/mengyafei43/article/details/25195445 TCP/IP TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层 ...

  2. shell脚本练习【转】

    1.写一个脚本,判断当前系统上所有用户的shell是否为可登录shell(即用户的shell不是/sbin/nologin):分别这两类用户的个数:通过字符串比较来实现: #脚本内容 [root@ce ...

  3. JS实现集合和ECMA6集合

    集合类似于数组,但是集合中的元素是唯一的,没有重复值的.就像你学高中数学的概念一样,集合还可以做很多比如,并集,交集,差集的计算.在ECMA6之前,JavaScript没有提供原生的Set类,所以只能 ...

  4. IdentityServer4结合AspNetCore.Identity实现登录认证踩坑填坑记录

    也可以自定义实现,不使用IdentityServer4.AspNetIdentity这个包,当然还要实现其他接口IResourceOwnerPasswordValidator. IProfileSer ...

  5. T-SQL语句1

    一.创建表 1.创建常见表 create table tablename ( Column_name1 dataType, Column_name1 dataType, Column_name1 da ...

  6. 利用 ImageAI 在 COCO 上学习目标检测

    ImageAI是一个python库,旨在使开发人员能够使用简单的几行代码构建具有包含深度学习和计算机视觉功能的应用程序和系统. 这个 AI Commons 项目https://commons.spec ...

  7. jquery multi-select 实例demo

    运行效果: 其他的不多说了,都是用的jquery.multiSelect.js组件实现的,直接看代码吧 代码下载地址: http://download.csdn.net/detail/ajavabir ...

  8. odoo国际化翻译

    翻译功能简述 每个模块的翻译文件放在该模块目录下i18n目录里. 模块内相关字符串一般用英语写成,然后通过翻译模板导出功能,导出一个翻译模板po文件. 翻译人员使用翻译软件(poedit)进行翻译后, ...

  9. IllegalArgumentException: Unmatched braces in the pattern.

    IllegalArgumentException: Unmatched braces in the pattern. 非法参数异常. 不匹配的 吊带 在 样品 中. === 没有管.  项目一直卡在d ...

  10. 修改无线wifi网络名称。注册表。windows 无线属性 windows 无线 配置文件

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha windows 无线属性 windows 无线 配置文件 ======= 修改完成,之后 ...