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


Posted in Javascript onSeptember 11, 2017

示例如下:

<!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元素内容改变的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 #Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 #Javascript
简单谈谈JS中的正则表达式
Sep 11 #Javascript
详解Vue双向数据绑定原理解析
Sep 11 #Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 #Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 #Javascript
基于bootstrop常用类总结(推荐)
Sep 11 #Javascript
You might like
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
日本十大惊悚动漫
2020/03/04 日漫
PHP版自动生成文章摘要
2008/07/23 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
关于Javascript 的 prototype问题。
2007/01/03 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
python版学生管理系统
2018/01/10 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python入门之井字棋小游戏
2020/03/05 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
安全生产月演讲稿
2014/05/09 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
政府四风问题整改措施
2014/10/04 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书