<!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. c语言基本函数

    1. 用宏定义写出swap(x,y) #define swap(x, y) x = x + y; y = x - y; x = x - y; 2.数组a[N],存放了1至N-1个数,其中某个数重复一次 ...

  2. 常用: JS 获取浏览器窗口大小

    // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && ...

  3. html5--6-53 阶段练习4-画廊

    html5--6-53 阶段练习4-画廊 学习要点 运用所学过的知识完成一个简单的小练习,理解对过渡动画的应用. @charset "utf-8"; /* CSS Document ...

  4. UVA-11549(floyd判圈算法)

    题意: 给一个整数k,每次平方后只能显示结果的前n位,问在这个过程中能得到的最大的数是多少; 思路: floyd判圈算法;它的正确性建立在这得到的这些数是有限的,所以一定是一个循环,在这个循环的圈里面 ...

  5. poj-1273 Drainage Ditches(最大流基础题)

    题目链接: Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 67475   Accepted ...

  6. 【hdu 4374】One Hundred Layer

    [题目链接] 点击打开链接 [算法] 不难看出,这题可以用动态规划来解决 f[i][j]表示第i行第j列能够取得的最大分数 则如果向右走,状态转移方程为f[i][j]=max{f[i-1][k]+a[ ...

  7. Python实现的一个简单LRU cache

    起因:我的同事需要一个固定大小的cache,如果记录在cache中,直接从cache中读取,否则从数据库中读取.python的dict 是一个非常简单的cache,但是由于数据量很大,内存很可能增长的 ...

  8. poj1830开关问题——异或高斯消元

    题目:http://poj.org/problem?id=1830 根据题意,构造出n元方程组: a(1,1)x1 ^ a(1,2)x2 ^ a(1,3)x3 ... a(1,n)xn = st1 ^ ...

  9. iconMoon---小图标小记

    IcoMoon 是一个免费的图标库.可以下载自己需要的图标 三.使用流程.操作演示 进入主页,点击下图所示区域开始: 每个图标你都是可以自己进行标记的(移上去会看到Edit, 点击之),然后—— 注: ...

  10. bzoj4516

    后缀自动机 留个板子 upd:大概懂了 每次新加入的npRight集合肯定只有最后一个位置,那么求所有长得不一样的子串贡献就是Max-Min+1,因为Right集合只有这一个位置,所以这Max-Min ...