简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

click事件触发span元素内容改变的方法

小云云
发布： 2017-12-29 09:41:23
原创
4865 人浏览过

本文主要和大家分享checkbox:click事件触发span元素内容改变的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

示例如下：

<!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>
登录后复制

相关推荐：

Jquery对新插入的节点 绑定Click事件失效的解决方法

jquery事件mousedown和Click事件不能同时用？

JQuery不能使用click事件的问题解决

以上是click事件触发span元素内容改变的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
click span 元素
来源：php.cn
上一篇：jquery appaend元素中id绑定事件失效解决办法 下一篇：实例详解基于DOM之empty和remove的区别
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在移动视图中，当用户点击链接时，如何关闭此导航栏？ 当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...
来自于 2024-04-06 19:23:03
0
1
411
如果值存在，则获取记录总和，将其视为 1，而不是精确值 我需要“打开”为2并单击为1但现在我越来越喜欢打开为5并单击为2"SELECTCOALESCE(sum(requested),0)asrequested,COALESCE...
来自于 2024-04-04 16:49:24
0
1
338
判断数组中是否存在元素的过程是无效的 很抱歉打扰您，但我已经花了两个小时来解决这个问题。问题是我的代码只添加了一个元素，但没有添加其他id，写的是“已经有”$(function(){$(".js-compar...
来自于 2024-04-03 13:03:54
0
1
377
地面滤镜模糊过渡问题 按下按钮会模糊背景，但在过渡时，div的边缘过渡效果不佳。除了Firefox之外的所有浏览器都存在此问题，我该如何修复它？varbtn=document.querySelector...
来自于 2024-04-01 23:10:22
0
1
335
jQuery 变量重定向到未定义的 url，尽管它是一个字符串 我在尝试使用jQuery重定向到新URL时遇到问题，但不知何故它在这种特定情况下不起作用。我将jQuery与html和Djangobacklog结合使用，但我认为这些都不会导致显示...
来自于 2024-04-01 21:03:17
0
1
341
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！