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. RSD 直观介绍

    RSD TOR RSD SLED Blade MEMORY REDFISH REDFISH with Storage IPMI https://yyscamper.gitbooks.io/the-wa ...

  2. 问题:oracle 12c rac数据库服务器的home目录丢失问题解决2018-06-25 18:30

    问题原因:是由于运维粗心,在缩容/home(此目录下挂载了逻辑卷lv_home)时没有先缩小文件系统(resize2fs)也没有备份,导致home数据损坏,重启时系统无法正常启动 解决方案:跳过此ho ...

  3. ubuntu18.04 安装新版本openssl

    首先我们应该知道ubuntu18.04内置了1.1.0g版本的openssl: 使用下面的apt命令更新Ubuntu存储库并安装软件包编译的软件包依赖项: sudo apt update sudo a ...

  4. MS08_067漏洞渗透攻击实践

    MS08_067漏洞渗透攻击实践 实验前准备 1.两台虚拟机,其中一台为kali,一台为windows xp sp3(英文版). 2.在VMware中设置两台虚拟机网络为NAT模式,自动分配IP地址, ...

  5. topcoder srm 400 div1

    problem1 link 枚举指数,然后判断是不是素数即可. problem2 link 令$f[len][a][b][r]$(r=0或者1)表示子串$init[a,a+len-1]$匹配$goal ...

  6. Bootstrap3基础 input-group glyphicon 输入框组与glyphicon图标

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

  7. CentOS Yum 源搭建

    创建yum源服务,主要用到了两个软件createrepo和httpd.前者是创建yum源索引的工具,后者是提供文件在线流浪的功能,当然,除了httpd之外,你也可以使用nginx替代. creater ...

  8. POJ 2594 Treasure Exploration(最小可相交路径覆盖)题解

    题意:有n个点,m条单向边,每个机器人能沿着单向边走,能重复经过一个点,问最少几个机器人走遍n个点 思路:原来以前学的都是不能相交的算法....可相交的做法是跑Floyd把能到达的都加上边,然后跑最小 ...

  9. R read.tabe line 5 did not have 2 elements

    R read.tabe  line 5 did not have 2 elements Reason: there are special characters such as # in file o ...

  10. SP3946 MKTHNUM - K-th Number(整体二分)

    思路 整体二分的板子题,没什么思路好说 代码 #include <cstdio> #include <algorithm> #include <cstring> u ...