checkbox：click事件触发span元素内容改变

最新推荐文章于 2021-08-04 08:51:21 发布

我爱丁丁猫

最新推荐文章于 2021-08-04 08:51:21 发布

阅读量279

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://www.mk2048.com/blog/blog.php?id=hbkbjbhkki0j&title=checkbox%EF%BC%9Aclick%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91span%E5%85%83%E7%B4%A0%E5%86%85%E5%AE%B9%E6%94%B9%E5%8F%98

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script src="jquery.js"></script>
</head>
<body>
<p>我想去<span id="spanId">_____</span></p>
<form action="#" id="form">
    <input type="checkbox" name="city" value="南京">南京
    <input type="checkbox" name="city" value="北京">北京
    <input type="checkbox" name="city" value="纽约">纽约
</form>
<script>
        $(function () {
            $("input[name=city]").click(function () {
                var arr = [];
                $("input[name=city]").each(function () {
                    if(this.checked){
                        arr.push(this.value);
                    }else{
                        var index = arr.indexOf(this.value);
                        if(index != -1){
                            arr[index] = "";
                        }
                    }
                });
                $("#spanId").text(arr.join(","));
            })
        });
</script>
</body>
</html>