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与JSon实现的无刷新分页代码
Sep 13 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
vue中使用props传值的方法
May 08 Javascript
Javascript webpack动态import
Apr 19 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
提取HTML标签
2006/10/09 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php数字游戏 计算24算法
2012/06/10 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Python中的Django基本命令实例详解
2018/07/15 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
房屋租赁合同补充协议
2014/10/11 职场文书
教师节校长致辞
2015/07/31 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
Golang解析JSON对象
2022/04/30 Golang