<!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. POJ3074 Sudoku —— Dancing Links 精确覆盖

    题目链接:http://poj.org/problem?id=3074 Sudoku Time Limit: 1000MS   Memory Limit: 65536K Total Submissio ...

  2. MYSQL进阶学习笔记十一：MySQL 表的分析，检查和优化！（视频序号：进阶_28)

    知识点十二:MySQL 表的分析,检查和优化(28) 表的分析,检查和优化: 定期分析表: ANALYZE [LOCAL | NO_WRITE_TO_BINLOG] TABLE tbl_name [, ...

  3. [置顶] SQL Server 2005 双机热备的实现

    [置顶] SQL Server 2005 双机热备的实现 分类: SQLSERVER2011-08-24 21:25 901人阅读 评论(0) 收藏 举报 sql servermicrosoftsql ...

  4. UUIDUtils

    package com.cc.hkjc.util; import java.util.UUID; /** * 字符串工具类 *  * @author:匿名 *  */public class UUID ...

  5. 简易五子棋 V1.1.0

    main.cpp #include "fivechess.cpp" int main() { fivechess a; a.RunGame(); getchar(); return ...

  6. ${varname:-defaultvalue}

    ${varname:-defaultvalue}的意思是:如果varname存在且非null,则返回其值:否则,返回defaultvalue. 用途:如果变量未定义,则返回默认值.

  7. UVA-11082 Matrix Decompressing(有上下界的最大流)

    题目链接: Matrix Decompressing 题意: 给一个矩阵的每行和每列的和,(给的是前i行或者列的和); 矩阵中每个元素的值在1到20之间,找出这样的一个矩阵: 思路: 把它转化成一个二 ...

  8. codeforces 672D D. Robin Hood(二分)

    题目链接: D. Robin Hood time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. 「BZOJ3438」小M的作物（最小割

    3438: 小M的作物 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1891  Solved: 801[Submit][Status][Discus ...

  10. 传统开发有必要学Dubbo吗

    dubbo作为一个知名的分布式服务调用框架,在众多互联网公司都有广泛的应用.但其本质还是一个远程服务调用框架,最初就是为了应对SOA服务治理时才用到的,如果本身服务不多就没必要用它了.如果对技术感兴趣 ...