checkbox:click事件触发span元素内容改变

<!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>
时间: 2024-08-04 15:10:47

checkbox:click事件触发span元素内容改变的相关文章

Fastclick 导致click事件触发两次的问题

我在移动web上使用Fastclick这个库去解决300ms延迟问题,但是在安卓4.2下的webview中引发了另一个比较奇怪的bug. 在A页面中有个 a button,在B页面中有个 b button,a和b都在同一个position,给a和b都注册一个click事件.a的click事件触发后跳转到B页面.当a被点击后调到B页面,你会发现b按钮的click事件也被触发了. 没错,事件'穿透'了两个页面! 但其实并没有穿透,点击a按钮时,其实有如下两个动作: fastclick用touchst

Fastclick 导致click事件触发两次的问题,fastclickclick

文章原文csdn链接:www.foreverpx.cn 我在移动web上使用Fastclick这个库去解决300ms延迟问题,但是在安卓4.2下的webview中引发了另一个比较奇怪的bug. 在A页面中有个 a button,在B页面中有个 b button,a和b都在同一个position,给a和b都注册一个click事件.a的click事件触发后跳转到B页面.当a被点击后调到B页面,你会发现b按钮的click事件也被触发了. 没错,事件‘穿透’了两个页面! 但其实并没有穿透,点击a按钮时,

vue实现动态绑定class--(三目运算符)根据span数字内容改变其样式

一.根据span数字内容改变数字本身样式(两种样式) <template> //使用三目运算符,判断当span的val是否小于0给其不同的class名 <span class="inOut" :class="abc.upgold<0?'inColor':'outColor'">得分:{{abc.upgold}}</span> </template> <style scoped> .inColor{ c

div、span绑定内容改变事件

内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法,代码如下: 1 <meta charset="UTF-8"> 2 <script src="jquery.min.js"></script> 3 <span id="s"> 4 <span id=

关于IOS浏览器:document,body的click事件触发规则

今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是讲原理,这里写个简单的代码,大家可以复制到自己页面中去实验: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi

checkbox:click事件触发文本框显示隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="jquery.js"></script> </head> <body> <form action="#"

toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

toggle([speed],[easing],[fn]) 概述 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. 1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate(迁移)插件可以恢复此功能.大理石平台生产厂 参数 fn,fn2,[fn3,fn4,...]Function,....V1.0 Removed 1.9 fn:第一数次点击时要执

移动端开发用touch事件还是click事件

前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的. 首先,我先说一下touch事件在开发中存在的两个问题: 1.touch事件在某些场景下存在点击穿透的问题. 2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件. 1问题的原因:移动端事件触发的

JS事件-对象监视事件,事件触发函数

写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click()                      鼠标单击 dblclick()                   鼠标双击 mouseover()             鼠标移入事件 mouseout()              鼠标移出事件 mousemove()             鼠标移动事件 mousedown()            鼠标按下事件 mous