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 ...
随机推荐
- Java IO、BIO、NIO、BIO
一.什么是IO/NIO: IO:即BIO(Blocking IO):面向流的.同步阻塞式IO:(JDK1.4之前唯一的选择) NIO:面向缓冲的.同步非阻塞式IO:三大核心部分:Selector.Ch ...
- UVA11624 Fire! —— BFS
题目链接:https://vjudge.net/problem/UVA-11624 题解: 坑点:“portions of the maze havecaught on fire”, 表明了起火点不唯 ...
- PLSQL 安装说明
PLSQL安装说明. 1.安装oracle 11g ,2030端口设置防火墙例外.2.PLSQL Developer 9.0.0.1601是绿色版,复制到本地即可.3.PLSQL->Tools- ...
- WinDbg设置托管进程断点
WinDbg的Live模式调试..Net 托管代码 ,使用bp,bu,bm无法设置断点,也许是我不会.研究了下,托管代码有自己的命令,!BPMD 模块名 完全限定的方法名 步骤: 1.查找进程PID, ...
- 一步一步学Silverlight 2系列（24）：与浏览器交互相关辅助方法
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- BM算法模式匹配——字符串与KMP比较
下面是代码:BM是什么参考阮一峰老师的讲解 点击打开链接 #include<iostream> #include<algorithm> #include<string. ...
- java nio的一个严重BUG
java nio的一个严重BUG Posted on 2009-09-28 19:27 dennis 阅读(4588) 评论(5) 编辑 收藏 所属分类: java .源码解读 这个BU ...
- 【系列】 2-SAT
bzoj 1997 Planar 题目大意: 给一个存在曼哈顿回路的无向图,求该图是否为平面图 思路: 先把曼哈顿回路提出来,则剩下的边的两个端点若有$ABAB$的形式则这两条边必定一个在环外一个在环 ...
- [Selenium] Selenium find Element Examples
---> 1. By.id 以百度主页为例 <span classs = "bg s_ipt_wr"> <input type = "text& ...
- 如何用JavaScript实现获取验证码的效果
转自:http://www.php.cn/js-tutorial-411734.html HTML部分: 1 2 3 4 5 6 7 <body onload='createCode()'> ...