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与C# Windows应用程序交互方法
Jun 29 Javascript
document.createElement()用法
Mar 13 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
windows xp下安装pear
2006/12/02 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
如何定义TensorFlow输入节点
2020/01/23 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
吸烟检讨书2000字
2014/02/13 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server