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>以上是checkbox实现click事件触发span元素内容改变的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用物理手势触发有趣的屏幕 FaceTime 效果
Oct 12, 2023 pm 11:49 PM
在iOS17和iPadOS17中，Apple在iPhone和iPad上引入了类似Message的FaceTime反应。除了不是从菜单中选择图标之外，您还可以在FaceTime通话中通过物理手势触发它们。当您在运行iOS17的iPhone或运行iPadOS17的iPad上进行FaceTime视频通话时，您可以触发心形、气球、五彩纸屑、烟花等屏幕效果，视觉效果会在您的FaceTime通话视频中充斥显示屏，有时非常壮观，供其他人观看。您可以解放双手，只需使用物理手势即可触发这些反应。例如，一个竖起大拇
激发Mac上FaceTime中的反应效果的方法
Oct 10, 2023 pm 06:09 PM
在macOSSonoma中，Apple为FaceTime引入了类似消息的反应。不过，它们不是由文字触发，而是可以通过手势触发。当您在运行macOSSonoma或更高版本的Mac上进行FaceTime视频通话时，您可以触发心形、气球、五彩纸屑、烟花等屏幕效果，这些效果会淹没FaceTime通话窗口上的显示屏。您可以通过绿色的FaceTime菜单栏项触发这些图层屏幕效果，其中包括迷你网络摄像头视图和触发反应的按钮，或者您可以解放双手并仅使用物理手势触发相同的反应。例如，一个竖起大拇指触发一个赞，两个
iOS 17：如何在FaceTime中触发反应效果
Sep 22, 2023 pm 01:25 PM
在iOS17中，Apple在FaceTime中引入了类似消息的反应。不过，它们不是由文字触发，而是可以通过手势触发。当您在运行iOS17的iPhone上进行FaceTime视频通话时，您现在可以触发心形、气球、五彩纸屑、烟花等屏幕效果，这些效果会淹没FaceTime通话窗口上的显示屏。您可以通过在FaceTime中长按图片来触发这些图层屏幕效果，这会弹出反应选项菜单，或者您可以解放双手并仅使用物理手势触发相同的反应。例如，一个竖起大拇指触发一个赞，两个竖起大拇指是烟花。同样，一个大拇指向下算作不
事件冒泡为何会触发两次？
Feb 22, 2024 am 09:06 AM
事件冒泡为何会触发两次？事件冒泡（EventBubbling）是指在DOM中，当一个元素触发了某个事件（例如点击事件），该事件会从该元素开始向上冒泡至父元素，直到冒泡到最顶层的文档对象为止。事件冒泡是DOM事件模型的一部分，它允许开发者将事件监听绑定到父元素，从而在子元素触发事件时，可以通过冒泡机制来捕获并处理事件。然而，有时开发者会遇到事件冒泡触发两次的
为什么事件冒泡会触发多次？
Feb 24, 2024 pm 08:33 PM
事件冒泡为何会重复触发两次？在前端开发中，我们经常会遇到事件冒泡的概念。事件冒泡是指在页面上触发某个元素的特定事件时，该事件会向上级元素逐层传递，直到最终传递到文档对象。然而，有时候我们可能会遇到事件冒泡触发两次的问题，即使我们只绑定了一次事件监听器。那为什么会出现重复触发的现象呢？下面就让我们一起深入探讨其中可能的原因。首先，我们需要明确一个概念，即事件冒
Vue中如何使用v-on:click监听鼠标点击事件
Jun 11, 2023 am 10:12 AM
Vue是一款流行的前端框架，它帮助开发者更方便、快捷地构建网站和应用程序。其中，v-on:click是Vue中用于监听鼠标点击事件的指令。下面就来介绍一下如何在Vue中使用v-on:click来监听鼠标点击事件。首先，在Vue中使用v-on:click可以通过两种方式来定义鼠标点击事件：直接在模板中使用和在Vue实例中使用。下面我们来分别介绍这两种方式。直接
Vue应用中遇到"click"事件绑定无效怎么办？
Jun 24, 2023 pm 03:51 PM
Vue是一款流行的JavaScript框架，用于构建现代的Web应用程序。在Vue中，我们通常使用指令来实现DOM元素的操作。其中，"click"事件是常用的一个指令之一，然而，在Vue应用程序中，我们经常会遇到"click"事件绑定无效的情况。本文将介绍解决这一问题的方法。检查元素是否存在第一步是确认要绑定"click"事件的元素是否存在。如果元素不存在，
Vue中如何使用v-on:click.self实现只有自己触发事件
Jun 11, 2023 pm 01:57 PM
Vue是一款流行的前端框架，具有简洁、高效、易维护等特点，深受开发者喜爱。在Vue中，我们经常需要为组件或元素绑定事件来实现特定的交互效果，但有时候我们希望事件只由自身触发，不受其他因素干扰。那么怎样在Vue中使用v-on:click.self实现只有自己触发事件呢？本文将为您详细解答。首先，我们需要了解v-on指令的基本用法。v-on指令用于绑定事件，常用
