<!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. React 编码

    https://github.com/Minwe/style-guide/blob/master/React.js.md https://github.com/planningcenter/react ...

  2. react项目中的注意点

    一.ES6 的编译方法 目前主流的浏览器还不支持ES6. 现在一般采用webpack 和 <script type="text/babel">对jsx  语法进行编译, ...

  3. C++的学习 (此博客将一直补充更新下去，C++语法方面的内容不开新随笔了， *【语法学习】)

    // #include <sstream> // stringstream 是 C++ 提供的另一个字串型的串流(stream)物件,包含在上述头文件中 // 先谈它在字符串处理方面的应用 ...

  4. php中自运算++ 或-- 的总结

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. [Selenium] waitUntilAllAjaxRequestCompletes

    private static final String JQUERY_ACTIVE_CONNECTIONS_QUERY = "return $.active == 0;"; pri ...

  6. iOS中键盘的收起

    在UIViewController中收起键盘,除了调用相应控件的resignFirstResponder方法之外,还有另外三种方法: 重载UIViewController中的touchesBegin方 ...

  7. JNI（Java Native Interface）

    一.JNI(Java Native Interface)        1.什么是JNI:               JNI(Java Native Interface):java本地开发接口   ...

  8. JAVA interrupte中断线程的真正用途

    Java线程之中,一个线程的生命周期分为:初始.就绪.运行.阻塞以及结束.当然,其中也可以有四种状态,初始.就绪.运行以及结束. 一般而言,可能有三种原因引起阻塞:等待阻塞.同步阻塞以及其他阻塞(睡眠 ...

  9. py-day15_css+js_初

    css+js_初 一.鼠标移动变色 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  10. 指针 * &

    int main() { ; //定义int变量updates int * p_updates; //定义指针p_updates p_updates=&updates;//将updates的地 ...