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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
uniapp实现横向滚动选择日期
Oct 21 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
第一节--面向对象编程
2006/11/16 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
joomla数据库操作示例代码
2016/01/06 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
js 自定义个性下拉选择框示例
2013/08/20 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python创建数字列表的示例
2019/11/28 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
厂长助理岗位职责
2013/12/27 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
英文邀请函
2015/02/02 职场文书
教师工作态度自我评价
2015/03/05 职场文书
朋友聚会开场白
2015/06/01 职场文书
学生会自荐信
2019/05/16 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server