JQuery 获取checkbox 多选值

最新推荐文章于 2022-07-27 10:49:09 发布

名贤集

最新推荐文章于 2022-07-27 10:49:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： jquery input function xhtml server div

本文链接：https://blog.youkuaiyun.com/QQ282030166/article/details/7059619

JQuery 专栏收录该内容

27 篇文章

订阅专栏

本文展示了一个HTML页面，利用jQuery实现用户选择项的动态更新，通过点击复选框，实时显示选中项的数量和内容。

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

<!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 runat="server">
    <title></title>

    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <input type="checkbox" name="group" value="我是1" />我是1
            <input type="checkbox" name="group" value="我是2" />我是2
            <input type="checkbox" name="group" value="我是3" />我是3
        </div>
        <p>
        </p>
    </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function() {

            $("input[name=group]").click(function() {
                var arr = new Array();
                $("input[name=group]:checked").each(function(key, value) {
                    arr[key] = $(value).val();
                })
                //join方法将数组以“，”号为分隔符连接成字符串
                $("p").text("当前选中" + arr.length + "项，内容是" + arr.join(","));
            });
        });
    </script>

</body>
</html>