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>
checkbox：click事件触发span元素内容改变的更多相关文章
- vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式
一.根据span数字内容改变数字本身样式(两种样式) <template> //使用三目运算符,判断当span的val是否小于0给其不同的class名 <span class=&qu ...
- div、span绑定内容改变事件
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
- 关于IOS浏览器：document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- click事件触发也有失灵的时候？
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- checkbox：click事件触发文本框显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue click事件获取当前元素属性
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...
- selenium常用命令之操作页面元素及获取元素内容的事件整理
/**id <input type="text" id="phone" name="phone" class="LoginT ...
- 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响
原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...
- a标签嵌套href默认行为与子元素click事件存在影响
2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...
随机推荐
- HDU2102 A计划 —— BFS
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2102 A计划 Time Limit: 3000/1000 MS (Java/Others) Me ...
- YTU 2866: 结构体---点坐标结构体
2866: 结构体---点坐标结构体 时间限制: 1 Sec 内存限制: 128 MB 提交: 499 解决: 344 题目描述 定义一个表示点坐标的结构体,输入两个点的坐标,输出这两个点中点的坐 ...
- SPOJ:Strange Waca(不错的搜索&贪心&剪枝)
Waca loves maths,.. a lot. He always think that 1 is an unique number. After playing in hours, Waca ...
- noip2010引水入城
https://www.zybuluo.com/ysner/note/1334997 这道题fst了 题面 戳我 解析 我一开始的想法是,按照高度给第一行排序,然后贪心地选取目前到不了的,高度最高的第 ...
- Cocos2d-X对常用Object-C特性的替换
平台的转换,总是让我们不自觉的去寻找两者的相同处,不过Cocos2d-X的确对很多Object-C的特性进行了模仿性质的封装,使熟悉Object-C的人能够在其中看到很多类似的概念而感到亲切. ...
- javaScript 基本知识点总结
1 javaScript 简介 JavaScript最初起源于LiveScript语言,当互联网开始流行时,越来越多的网站开始使用HTML表单与用户交互,然而表单交互却成了制约网络发展的重大瓶颈(用户 ...
- springmvc不进入Controller导致404
转自:https://blog.csdn.net/qq_36769100/article/details/71746449#1.%E5%90%AF%E5%8A%A8%E9%A1%B9%E7%9B%AE ...
- django上课笔记2-视图CBV-ORM补充-Django的自带分页-Django的自定义分页
一.视图CBV 1.urls url(r'^login.html$', views.Login.as_view()), 2.views from django.views import View cl ...
- hibernate的基础学习--多表关联数据查询
Hibernate共提供4种多表关联数据查询方式 OID数据查询+OGN数据查询方式 HQL数据查询方式 QBC数据查询方式 本地SQL查询方式(hibernate很少用) 1.OID数据查询+OGN ...
- HDU6024：Building Shops（DP）
传送门 题意 在一条直线上有n个教室,现在要设置糖果店,使得最后成本最小,满足以下两个条件: 1.若该点为糖果店,费用为cost[i]; 2.若不是,则为loc[i]-最近的糖果店的loc 分析 dp ...