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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
使用python实现链表操作
2018/01/26 Python
python操作文件的参数整理
2019/06/11 Python
pandas分区间,算频率的实例
2019/07/04 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
房产买卖委托公证书
2014/04/04 职场文书
政协工作总结2015
2015/05/20 职场文书
windows安装python超详细图文教程
2021/05/21 Python
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL