有这样的一个需求:对于一组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. linux下查看各硬件型号

    查看主板型号 # dmidecode |grep -A 8 "System Information"System Information 上网查DELL CS24-TY,找到说主板 ...

  2. python3 操作appium

    # -*- coding: utf-8 -*- # @Time : 2018/10/8 11:00 # @Author : cxa # @File : test.py # @Software: PyC ...

  3. springcloud常见问题处理

    无法在任何已知服务器上执行请求. 原因是注册中心未启动.在使用springcloud搭建微服务时,一定要先启动注册中心,再启动服务端和客户端.具体报错如下: com.netflix.discovery ...

  4. python小记

    最近有匹骚猪用微信骚扰我,我很是气愤, 自学一波脚本: 学习目的:用脚本回击回去,通过py写一个脚本,一次性给别人发n条消息: mac上自学python: brew install python3(自 ...

  5. linux内核内存分配(三、虚拟内存管理)

    在分析虚拟内存管理前要先看下linux内核内存的具体分配我開始就是困在这个地方.对内核内存的分类不是非常清晰.我摘录当中的一段: 内核内存地址 ============================ ...

  6. PHP 5.2、5.3、5.4、5.5、5.6 对比以及功能详解

    php5.2.x php5.3.x php5.4.x php5.5.x php5.6.x 对比详解 截至目前(2014.2), PHP 的最新稳定版本是 PHP5.5, 但有差不多一半的用户仍在使用已 ...

  7. Java编程的逻辑 (28) - 剖析包装类 (下)

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  8. django中的view测试和models测试样例

    感觉用model_mommy比factory_boy要好些. 如果Models.py如下: from django.db import models from django.contrib.auth. ...

  9. HDU4267 树状数组

    题意描述: 给定一个数组,有两种操作: 操作一:a b k c 对于区间a~b之间的元素如果下标满足(i-a)%k=0则给元素i加上c 操作二:a          查询下标为a的元素当前值 解题思路 ...

  10. phpinfo常见配置信息

    在开发过程中,经常碰到比如加载的是哪个配置文件.上传文件大小受限.PHP错误日志文件位置等问题需要快速查找出来并解决,因此总结记录出下面的相关配置. phpinfo - 输出关于 PHP 配置的信息 ...