<!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. REST的本质，就是用户操作某个网络资源（具有独一无二的识别符URI），获得某种服务，也就是动词+资源（都是HTTP协议的一部分）

    REST的名称”表现状态转化”中,省略了主语.”表现”其实指的是资源的表现. 资源就是网络上的一个数据实体,或者说是一个具体信息.它可以是一段文本.一张图片.一首歌曲.一种服务.你可以用一个URI(统 ...

  2. Could not load file or assembly 'MyAssembly.XmlSerializers

    https://stackoverflow.com/questions/17755559/could-not-load-file-or-assembly-myassembly-xmlserialize ...

  3. YTU 2424: C语言习题 字符串比较

    2424: C语言习题 字符串比较 时间限制: 1 Sec  内存限制: 128 MB 提交: 1042  解决: 613 题目描述 写一函数,实现两个字符串的比较.即自己写一个strcmp函数,函数 ...

  4. 3种方法判断手机浏览器跳转WAP手机网站

    随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我 ...

  5. Microsoft.XMLHTTP基本用法

    客户端调用XMLHTTP的过程很简单,只有5个步骤:1.创建XMLHTTP对象2.打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等.客户端通过Open命令打开与服务端的服务网页 ...

  6. MYSQL初级学习笔记三：数据的操作DML!（视频序号：初级_24,25,36)

    知识点五:数据的操作DML(24,25,36) 插入数据: --测试插入记录INSERT CREATE TABLE IF NOT EXISTS user13( id TINYINT UNSIGNED ...

  7. codeforces 448B. Suffix Structures 解题报告

    题目链接:http://codeforces.com/problemset/problem/448/B 题目意思:给出两种操作automaton:可以删除字符串中任意一个字符: array:交换字符串 ...

  8. JAVA RTTI

    基础类可接收我们发给派生类的任何消息,因为两者拥有完全一致的接口.我们要做的全部事情就是从派生上溯造型,而且永远不需要回过头来检查对象的准确类型是什么.所有细节都已通过多态性获得了完美的控制. 但经过 ...

  9. web_html-day1

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  10. centos7 && centos6.5部KVM使用NAT联网并为虚拟机配置firewalld && iptables防火墙端口转发

    centos7 && centos6.5 部KVM使用NAT联网并为虚拟机配置firewalld && iptables防火墙端口转发 一.准备工作: 1: 检查kvm ...