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中html()方法使用不当带来的陷阱
Apr 07 Javascript
JavaScript 继承使用分析
May 12 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 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长连接实现与使用方法详解
2018/02/11 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Python实现一个论文下载器的过程
2021/01/18 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
党课学习思想汇报
2014/01/02 职场文书
人事专员工作职责
2014/02/22 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python