


Checkbox implements click event to trigger content change of span element
<!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>
The above is the detailed content of Checkbox implements click event to trigger content change of span element. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In iOS17 and iPadOS17, Apple introduced Message-like FaceTime reactions on iPhone and iPad. Instead of selecting icons from a menu, you can trigger them with physical gestures during a FaceTime call. When you make a FaceTime video call on an iPhone running iOS 17 or an iPad running iPadOS 17, you can trigger screen effects such as hearts, balloons, confetti, fireworks, etc. The visual effects will fill the display in your FaceTime call video. Sometimes spectacular for others to watch. You are hands-free and can trigger these reactions using only physical gestures. For example, a thumbs up

In macOS Sonoma, Apple introduced message-like reactions for FaceTime. However, instead of being triggered by text, they can be triggered by gestures. When you make a FaceTime video call on a Mac running macOS Sonoma or later, you can trigger screen effects such as hearts, balloons, confetti, fireworks, and more that flood the display on the FaceTime call window. You can trigger these layer screen effects via the green FaceTime menu bar item, which includes a mini webcam view and buttons to trigger reactions, or you can go hands-free and trigger the same reactions using just physical gestures. For example, a thumbs up triggers a like, two

Why does event bubbling trigger twice? Event bubbling (Event Bubbling) means that in the DOM, when an element triggers an event (such as a click event), the event will bubble up from the element to the parent element until it bubbles to the top-level document object. . Event bubbling is part of the DOM event model, which allows developers to bind event listeners to parent elements, so that when child elements trigger events, the events can be captured and processed through the bubbling mechanism. However, sometimes developers encounter events that bubble up and trigger twice.

In iOS17, Apple introduced message-like reactions in FaceTime. However, instead of being triggered by text, they can be triggered by gestures. When you make a FaceTime video call on an iPhone running iOS 17, you can now trigger screen effects such as hearts, balloons, confetti, fireworks, and more that flood the display over the FaceTime call window. You can trigger these layer screen effects by long-pressing on a picture in FaceTime, which will bring up a menu of reaction options, or you can go hands-free and trigger the same reactions using just physical gestures. For example, one thumbs up triggers a like, and two thumbs up are fireworks. Likewise, a thumbs down does not count

Vue is a popular front-end framework that helps developers build websites and applications more conveniently and quickly. Among them, v-on:click is the instruction in Vue used to monitor mouse click events. Let's introduce how to use v-on:click in Vue to monitor mouse click events. First of all, using v-on:click in Vue can define mouse click events in two ways: directly in the template and in the Vue instance. Below we will introduce these two methods respectively. direct

Why is the event bubbling triggered twice? In front-end development, we often encounter the concept of event bubbling. Event bubbling means that when a specific event of an element is triggered on the page, the event will be passed layer by layer to the upper element until it is finally passed to the document object. However, sometimes we may encounter the problem of event bubbling and triggering twice, even if we only bind the event listener once. So why does the phenomenon of repeated triggering occur? Let’s dive into the possible reasons below. First, we need to clarify the concept of event risk

Vue is a popular JavaScript framework for building modern web applications. In Vue, we usually use directives to operate DOM elements. Among them, the "click" event is one of the commonly used instructions. However, in Vue applications, we often encounter situations where the "click" event binding is invalid. This article explains how to solve this problem. The first step in checking whether an element exists is to confirm whether the element to which you want to bind a "click" event exists. If the element does not exist,

Vue is a popular front-end framework that is simple, efficient, and easy to maintain, and is loved by developers. In Vue, we often need to bind events to components or elements to achieve specific interactive effects, but sometimes we want the event to be triggered only by itself, without interference from other factors. So how to use v-on:click.self in Vue to trigger events only by yourself? This article will give you detailed answers. First, we need to understand the basic usage of the v-on instruction. The v-on directive is used to bind events, commonly used
