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控制Session操作方法
Jan 17 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
三步实现ionic3点击退出app程序
Sep 17 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中CI操作多个数据库的代码
2012/07/05 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php中Snoopy类用法实例
2015/06/19 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
python实现SMTP邮件发送功能
2020/06/16 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
初中新生军训方案
2014/05/13 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
小学一年级语文教学反思
2016/03/03 职场文书