jquery如何获取checkbox的值

一、总结

一句话总结：就是通过jquery获取哪些对应name的checkbox，然后找出:check（被选中的），然后通过jquery的each遍历获取这些的值即可

$('input[name='checkboxName']:checked')+.each遍历取值

二、使用JQuery获取被选中的checkbox的value值

参考：使用JQuery获取被选中的checkbox的value值
https://www.cnblogs.com/td960505/p/6123510.html

以下为使用JQuery获取input checkbox被选中的值代码:

<html>
    <head>
        <meta charset="gbk">
        <!-- 引入JQuery -->
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
    </head>

<body>
        <input type="checkbox" value="橘子" name="check">橘子1</input>
        <input type="checkbox" value="香蕉" name="check">香蕉1</input>
        <input type="checkbox" value="西瓜" name="check">西瓜1</input>
        <input type="checkbox" value="芒果" name="check">芒果1</input>
        <input type="checkbox" value="葡萄" name="check">葡萄1</input>
        
        <input type="button" value="方法1" id="b1">
        <input type="button" value="方法2" id="b2">

</body>
    
    <script>
        //方法1
        $("#b1").click(function(){
            //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
            //意思是选择被选中的checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("你选了："+
                    $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
            });
        });
        
        //方法2
        $("#b2").click(function(){
            $.each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("你选了："+
                        $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
                }
            });
        });
    </script>
</html>

 

jquery如何获取checkbox的值的更多相关文章

  1. jquery 循环获取checkBox的值,以及对复选框选中，取消，操作按钮

    法一:jquery 循环获取选中checkBox框的值 function checkeds() { $("input:checkbox").each(function(index) ...

  2. JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

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

  3. jQuery实时获取checkbox状态问题

    在最近的项目开发中,使用jQuery操作checkbox时,发现一个问题. Html代码如下: <body> <div> <inputtype="checkbo ...

  4. 前端js获取checkbox的值

    1. var old = $("#old").val(); if (old != null && old != 'undefined' && old ...

  5. jquery获取checkbox的值并post提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jQuery之获取checkbox选中的值

    <mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!-- ...

  7. jquery 获取checkbox 选中值并拼接字符集

    1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){   chk_val ...

  8. attr prop jquery关于获取DOM属性值的两个函数

    $('#domid').attr('acitve') $('#domid').prop('checked') // 在使用JQUERY获取DOM元素的属性时,有两个函数,attr 和 prop < ...

  9. JS获取CHECKBOX的值 AND 两个CHECKBOX 循环选中

    获取多选按钮的值 var chk_value = ''; $('input[data-action="checkRole"]:checked').each(function(){ ...

随机推荐

  1. MyBatis 与 Hibernate 到底哪个更快？

    前言 由于编程思想与数据库的设计模式不同,生出了一些ORM框架. 核心都是将关系型数据库和数据转成对象型.当前流行的方案有Hibernate与myBatis. 两者各有优劣.竞争激烈,其中一个比较重要 ...

  2. Kali系列之Hydra/Medusa mysql密码爆破

    hydra hydra -L /home/chenglee/zidian/user.txt -P /home/chenglee/zidian/wordlist.TXT 192.168.137.133 ...

  3. mysql 用存储过程插入11位 随机数

    BEGIN #Routine body goes here... ; ); ); ); ); ); ); ); ); ); ); ); ); ) DEFAULT ''; ); ); WHILE row ...

  4. (4opencv)如何基于GOCW，创建一个实时视频程序

    直接使用提供的代码框架进行修改,是最快得到效果的方法:但是这样的灵活性较差,而且真正的程序员从来都不会停滞在这一步:我们需要的是"将框架解析到最小化.理清楚每个构建之间的关系",只 ...

  5. ListView与ArrayAdapter（二）

    ArrayAdapter: 数组适配器,用于简单的文字列表 activity_main.xml <RelativeLayout xmlns:android="http://schema ...

  6. tomcat部署maven web项目

    tomcat上部署maven web项目的三种方法 1.将maven项目打成war包,然后放到tomcat容器中发布: 2.在IDE工具中部署tomcat,然后使用远程部署方式部署本地maven项目: ...

  7. Bootstrap3基础 input-group-btn 按钮与输入框 横向组合

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. 2015,3,10 2(南阳理工ACM)

    描述有一个整型偶数n(2<= n <=10000),你要做的是:先把1到n中的所有奇数从小到大输出,再把所有的偶数从小到大输出.   输入 第一行有一个整数i(2<=i<30) ...

  9. MongoDB 创建索引及其他

    索引 以提升查询速度 测试:插入十万条数据到数据库中 for(i=0;i<100000;i++){db.t255.insert({name:'test'+i,age:i})} db.t1.fin ...

  10. 【Hadoop 分布式部署 十：配置HDFS 的HA、启动HA中的各个守护进程】

    官方参考 配置 地址  :http://hadoop.apache.org/docs/r2.5.2/hadoop-project-dist/hadoop-hdfs/HDFSHighAvailabili ...