jQuery实现遍历复选框

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

Yuyuquan

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

阅读量1.4w

点赞数 4

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_27918787/article/details/52744732

版权

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

摘要由CSDN通过智能技术生成

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"