有这样的一个需求:对于一组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. 终极利器!利用appium和mitmproxy登录获取cookies

    环境搭建 参考我之前写的https://www.cnblogs.com/c-x-a/p/9163221.html appium 代码start_appium.py # -*- coding: utf- ...

  2. HTML5 drawImage性能问题

    最近做游戏发现,为了节省HTTP请求,把很多组动画放到了一张图片上,也就是传说中的雪碧图,但是用drawImage从图片上截取一部分绘制在canvas上时会非常慢. 我的图片尺寸为5000*7000 ...

  3. 【论文阅读】Learning Spatial Regularization with Image-level Supervisions for Multi-label Image Classification

    转载请注明出处:https://www.cnblogs.com/White-xzx/ 原文地址:https://arxiv.org/abs/1702.05891 Caffe-code:https:// ...

  4. .NetCore生产环境下构建Consul(单个DC数据中心)的服务器健康检查

    下载最新的consul程序 consul 启动方式有两种 server 和client 默认是client 如果你不需要记录数据可以用 consul agent -dev 来启动 consul age ...

  5. Net Web Api Route

    Asp.Net Web Api Route   在目前的主流架构中,我们越来越多的看到web Api的存在,小巧,灵活,基于Http协议,使它在越来越多的微服务项目或者移动项目充当很好的service ...

  6. Vue.js项目集成ElementUI

    Vuejs实例-02Vue.js项目集成ElementUI   Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多 ...

  7. 004 jquery过滤选择器-----------(基本过滤选择器)

    1.介绍 2.常见基本过滤器 3.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  8. mongo连接数满问题处理

    记一次mongo服务端无法建立更多连接造成的客户端无法访问mongo集群的故障分析及解决 一. 问题: 程序无法连接mongo集群 现象: 2017-09-05T01:29:08.765+0000 I ...

  9. Java日志记录--log4j and logback

    问题的引入: 把所有的信息打印在控制台上不行吗? 01.控制台有行数限制: 02.System.out.println()影响系统性能: 03.如果我们需要对一些用户的行为习惯进行分析,我们找不到用户 ...

  10. Javascript实现一个插件

    写一个插件,兼容commonjs,amd,cmd,原生js. ;(function (global, factory) { if(typeof define == 'function' &&a ...