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 相关文章推荐
在vs2010中调试javascript代码方法
Feb 11 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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的FTP学习(二)
2006/10/09 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
JavaScript 创建对象
2009/07/17 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
angular十大常见问题
2017/03/07 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
运动会广播稿50字
2014/01/26 职场文书
面试后的感谢信范文
2014/02/01 职场文书
家长学校实施方案
2014/03/15 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
写景作文评语集锦
2014/12/25 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技