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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
单元选择合并变色示例代码
May 26 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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
php实现图片缩放功能类
2013/12/18 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
php命令行模式代码实例详解
2021/02/26 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
高一物理教学反思
2014/01/24 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
音乐专业自荐信
2014/02/07 职场文书
欢迎横幅标语
2014/06/17 职场文书
法定授权委托证明书
2014/09/27 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server