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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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开发中常用的8个小技巧
2008/08/27 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python素数检测实例分析
2015/06/15 Python
python语音识别实践之百度语音API
2018/08/30 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
如何把python项目部署到linux服务器
2020/08/26 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
巴基斯坦购物网站:Goto
2019/03/11 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
干部培训自我鉴定
2014/01/22 职场文书
旅游市场营销方案
2014/03/09 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android