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 ...
随机推荐
- UVA11613 Acme Corporation —— 最小费用流（流量不固定的最小费用流）
题目链接:https://vjudge.net/problem/UVA-11613 题意: 商品X在第i个月内:生产一件需要花费mi元,最多可生产ni件,销售一件(在这个月内销售,而不管它是在那个月生 ...
- YTU 2878: 结构体--学生信息排序
2878: 结构体--学生信息排序 时间限制: 1 Sec 内存限制: 128 MB 提交: 297 解决: 148 题目描述 定义存放一个学生信息的结构体类型,学生信息包括:姓名,学号,性别,院 ...
- ExtJS常用代码集合
ExtJS常用代码集合,包括弹出提示框,登陆框,树状结构等等.1. [代码]弹出提示框 <html> <head> <title>Ge ...
- BestCoder4 1002 Miaomiao's Geometry (hdu 4932) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4932 题目意思:给出 n 个点你,需要找出最长的线段来覆盖所有的点.这个最长线段需要满足两个条件:(1 ...
- Oracle：通过oracle sql developer工具导入excel数据
我使用的是oracle sql developer3.1版本,以前developer2.×老版本的excel导入功能有问题. excel文件内容如下: 第一步:找到要导入的表,右键-->导入数据 ...
- hdu 4398 Template Library Management（贪心+stl）
题意:n道题,每道题需要一个模板,现在手头有m个模板(标号1~m),解题的时候,如果没有需要的模板,可以向朋友借,但是用完之后必须在还给朋友一个模板(也就是说保持手头拥有m个模板),求解完n道题最少需 ...
- 无限轮播器的bug修复
前言:上一回实现了轮播器的自动滚动,但是有两个需要处理的bug. 1.增加需求:当用手拖拽控制轮播器的时候,停止自动滚动. 2.当同一个页面中有tableView,textView或scrollvie ...
- BZOJ_5311_贞鱼_决策单调性+带权二分
BZOJ_5311_贞鱼_决策单调性+带权二分 Description 众所周知,贞鱼是一种高智商水生动物.不过他们到了陆地上智商会减半. 这不?他们遇到了大麻烦! n只贞鱼到陆地上乘车,现在有k辆汽 ...
- 【旧文章搬运】Windows内核常见数据结构(进程相关)
原文发表于百度空间,2008-7-24========================================================================== 进程的相关结 ...
- Hackerearth: Mathison and the Pokémon fights
Mathison and the Pokémon fights code 这是一道比较有意思,出的也非常好的题目. 给定$n$个平面上的点$(x_i, y_i)$,(允许离线地)维护$Q$个操作:1. ...