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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
Vue中的字符串模板的使用
May 17 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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通过分类列表产生分类树数组的方法
2015/04/20 PHP
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Python函数嵌套实例
2014/09/23 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
接受捐赠答谢词
2014/01/27 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
离婚协议书范文2014
2014/10/16 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2015年教师节活动总结
2015/03/20 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers