jQuery获取checkbox选中的值

最新推荐文章于 2018-08-23 11:43:50 发布

Yuyuquan

最新推荐文章于 2018-08-23 11:43:50 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/qq_27918787/article/details/52744792

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用jQuery获取页面上被选中Checkbox元素值的方法。通过点击事件触发遍历所有同名Checkbox，筛选出已选中的项并拼接其值。此技术适用于收集表单中用户的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery获取checkbox选中的值


1、问题背景

     有几个多选框，选择其中的几个，获取选中的值


2、设计源码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>jQuery获取checkbox选中的值</title>  
    <script type="text/javascript" src="jquery-2.2.0.js"></script>  
    <script type="text/javascript">  
        $(function(){  
            $("input[name='ckb']:checkbox").click(function() {  
                var str = "";  
                $("input[name='ckb']:checkbox").each(function() {  
                    if($(this).is(":checked"))  
                    {  
                        str += $(this).attr("value")+",";  
                    }  
                });  
                if(str != null && str.length > 1)  
                {  
                    str = str.substring(0,str.length-1);      
                }  
                  
                alert(str);  
            });  
              
        });  
    </script>  
    </head>  
      
    <body>  
       <input type="checkbox" name="ckb" value="1"/>苹果  
       <input type="checkbox" name="ckb" value="2"/>橘子  
       <input type="checkbox" name="ckb" value="3"/>梨子  
       <input type="checkbox" name="ckb" value="4"/>香蕉  
    </body>  
    </html>

3、设计结果