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使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
spring+angular实现导出excel的实现代码
Feb 27 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python 爬虫的原理
2020/07/30 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
生物制药自我鉴定
2014/01/25 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
党员政治学习材料
2014/05/14 职场文书
体育馆的标语
2014/06/24 职场文书
中学推普周活动总结
2015/05/07 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js