<!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>

checkbox：click事件触发span元素内容改变的更多相关文章

  1. vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式

    一.根据span数字内容改变数字本身样式(两种样式) <template> //使用三目运算符,判断当span的val是否小于0给其不同的class名 <span class=&qu ...

  2. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

  3. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  4. click事件触发也有失灵的时候？

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  5. checkbox：click事件触发文本框显示隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue click事件获取当前元素属性

    Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...

  7. selenium常用命令之操作页面元素及获取元素内容的事件整理

    /**id <input type="text" id="phone" name="phone" class="LoginT ...

  8. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  9. a标签嵌套href默认行为与子元素click事件存在影响

    2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...

随机推荐

  1. angularJS ng-if的用法

    ng-if主要是用来判断是否显示,也可以做为而者选择其中一个的方法,满足判断条件ng-if="变量名" 显示,否者不显示,也可以用ng-if="!变量名"取反, ...

  2. 廖雪峰python3练习题一

    数据类型和变量 题目: 答案: print(123) print(456.789) print('\'Hello,world\'') print('\'Hello,\\\'Adam\\\'\'') p ...

  3. 【转】nose-parameterized是Python单元测试框架实现参数化的扩展

    原文地址: http://www.cnblogs.com/fnng/p/6580636.html 相对而言,Python下面单元测试框架要弱上少,尤其是Python自带的unittest测试框架,不支 ...

  4. bzoj3302

    树形dp 很明显我们可以枚举一条边,然后求两边的重心,这样是暴力,我们用一些奇怪的方法来优化这个找重心的过程,我们先预处理出来每个点最大和第二的儿子,然后每次把断掉的子树的贡献减掉,每次找重心就是向最 ...

  5. 如何 Xcode 开发工具里安装一个空的项目末模板

    很多朋友因为Xcode升级取消了空工程模板而发愁  今天给大家推荐一个简单方便的方法,导入空工程模板 对于 xcode7 来说可以使用下面的方法添加空模板.建议在升级的时候,不要下载beta版,最好下 ...

  6. 4种java复制文件的方式

    尽管Java提供了一个可以处理文件的IO操作类,但是没有一个复制文件的方法.复制文件是一个重要的操作,当你的程序必须处理很多文件相关的时候.然而有几种方法可以进行Java文件复制操作,下面列举出4中最 ...

  7. POJ1236【图的前连通（缩点）】

    题意: 1.初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件. 2.至少需要添加几条传输线路(边),使任意向一个学校发放软件后,经过若干次传送,网络内所有的学校最终都能得到软件. ...

  8. bzoj 3796: Mushroom追妹纸【二分+后缀数组+st表】

    把三个串加上ASCII大于z的分隔符连起来,然后求SA 显然每个相同子串都是一个后缀的前缀,所以枚举s1的每个后缀的最长和s2相同的前缀串(直接在排序后的数组里挨个找,最近的两个分别属于s1和s2的后 ...

  9. WPS Office 2019 for Linux来了

    难得啊,焕然一新. WPS Office 2019 For Linux更新说明 11.1.0.8392 版本主要更新: 修复wpsoffice进程存在时不能关机的问题 修复WPS文字模块web版式下拖 ...

  10. IDEA设置取消自动显示参数提示

    IDEA设置取消自动显示参数提示 最近在使用IDEA的过程中,发现方法中一直显示形参名的提示,无法选中,也无法删除,基于不同人的使用习惯不同,有的人不喜欢这种提示,我也在网上寻找各种解决方案,由于搜索 ...