<!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. futimens函数的使用【学习笔记】

    #include "apue.h" #include <fcntl.h> int main(int argc,char *argv[]) { int i,fd; str ...

  2. POJ 3750 小孩报数问题 （线性表思想 约瑟夫问题 数组模拟运算的 没用循环链表，控制好下标的指向就很容易了）

    小孩报数问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10423   Accepted: 4824 Descripti ...

  3. windows下运行swoole搭建环境

    swoole windows环境搭建 swoole框架是一个很神奇很厉害的框架,它弥补了PHP的本身的一些不足之处.其实swoole确切的说是一个使用C语言编写的PHP扩展,并且这个扩展不能够在win ...

  4. luogu 4782【模板】 2-SAT 问题

    2-SAT就是给出$m$个限制表示$x==val_x || y==val_y$ 求出满足的解 每个点拆成两个点,如果$x$不满足则$y$一定满足,$y$不满足同理.这样我们连边,然后$tarjan$即 ...

  5. [Java] String类， StringBuffer类

    1. String 类 1. 创建: String s1 = new String; s1 = "abc"; String s2 = new String("abc&qu ...

  6. 关于 .dyib 文件

    .dylib 意味着这是一个动态链接库. libz.dylib 是提供zip压缩.解压缩的库. 库的接口请 #import "zlib.h"

  7. B. Vanya and Books

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  8. E20180327-hm

    renew vt. 补充; 重新开始; 使更新; 使恢复; vi. 重申,重复强调; 重新开始; renewal  n. 重建,重生; 更新,革新; 重申; 合同的续订;

  9. Codeforces 550B 【暴力】

    题意: 有n个数字, 要求在这n个数中选出至少两个数字, 使得它们的和在L,R之间,并且最大的与最小的差值要不小于x 思路: 撒比了啊... 根据状态的话一共也就是2^15-直接暴力,二进制的小魅力还 ...

  10. python 字典 dict items values keys

    dict.items() 1 >>> d = dict(one=1,two=2) 2 >>> it1 = d.items() 3 >>> it1 ...