jQuery实现遍历复选框

最新推荐文章于 2021-06-16 11:38:30 发布

Yuyuquan

最新推荐文章于 2021-06-16 11:38:30 发布

阅读量1.4w

点赞数 4

分类专栏： jquery

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

版权

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的功能，当点击按钮时，遍历一组复选框，将选中的复选框的值以'——'连接，并显示在页面的指定div中。示例代码包括HTML结构和jQuery事件处理，展示了如何利用`:checked`选择器和`.each()`方法处理复选框的选择状态。

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

1、问题背景

     这里有10个复选框，根据选择的复选框获取其值，并将其值用“——”连接，插入到div中


2、实现源码

[html] view plain copy
⃕
print?

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title>遍历复选框</title>  
            <script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>  
            <script>  
                $(document).ready(function(){  
                    $("#btn").click(function(){  
                        var str = "";  
                        $("input[name='ckb']").each(function(){  
                            if($(this).is(":checked"))  
                            {  
                                str += "——" + $(this).val();  
                            }  
                        });  
                        $("#txt").html(str);  
                    });  
                });  
            </script>  
        </head>  
        <body>  
           <div>  
               <input type="checkbox" name="ckb" value="1" />1  
               <input type="checkbox" name="ckb" value="2" />2  
               <input type="checkbox" name="ckb" value="3" />3  
               <input type="checkbox" name="ckb" value="4" />4  
               <input type="checkbox" name="ckb" value="5" />5  
               <input type="checkbox" name="ckb" value="6" />6  
               <input type="checkbox" name="ckb" value="7" />7  
               <input type="checkbox" name="ckb" value="8" />8  
               <input type="checkbox" name="ckb" value="9" />9  
               <input type="checkbox" name="ckb" value="10" />10<br>  
               <input type="button" id="btn" value="遍历"/>  
               <div id="txt"></div>  
           </div>  
        </body>  
    </html>

3、实现结果