Home Web Front-end JS Tutorial How to get multiple values ​​selected in checkbox in js

How to get multiple values ​​selected in checkbox in js

Sep 30, 2017 am 09:40 AM
javascript get

Idea: Use the name attribute value to obtain the checkbox object, and then loop to determine the checked attribute (true means selected, false means unchecked). Here is an example demonstration:

1, HTML structure


<input type="checkbox" name="test" value="1" />
<span>
    1
</span>
<input type="checkbox" name="test" value="2" />
<span>
    2
</span>
<input type="checkbox" name="test" value="3" />
<span>
    3
</span>
<input type="checkbox" name="test" value="4" />
<span>
    4
</span>
<input type="checkbox" name="test" value="5" />
<span>
    5
</span>
<input type=&#39;button&#39; value=&#39;提交&#39; onclick="show()" />
Copy after login

2, javascript code (jQuery)


function show(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
}
Copy after login

3. Demonstration effect

The above is the detailed content of How to get multiple values ​​selected in checkbox in js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to get the Crimson Abyss of War Double Pamish Lucia How to get the Crimson Abyss of War Double Pamish Lucia Mar 25, 2024 pm 05:31 PM

Players can obtain Lucia's Crimson Abyss when playing in Battle Double Pamish. Many players don't know how to obtain Lucia's Crimson Abyss. Players can obtain it through research and development, or redeem it at the Phantom Pain Cage store. How to obtain R&amp;D for Battle Double Pamish Lucia Crimson Abyss 1. Players can obtain it by drawing from the R&amp;D system, which includes the base card pool, the theme limited card pool and the destiny limited card pool. 2. Revealed in these card pools The basic drop rate of Sia Crimson Abyss is 1.50%, but if the player draws Lucia Crimson Abyss from the card pool, the drop rate will increase to 1.90%. Redemption in the Phantom Pain Cage Store 1. Players can redeem fragments of Lucia Crimson Abyss by using Phantom Pain Scars in the Phantom Pain Cage Store. 2. You can redeem up to 30 fragments every week.

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

How to obtain administrator rights in Win11 system How to obtain administrator rights in Win11 system Mar 08, 2024 pm 10:00 PM

It is very important to obtain administrator rights in the Win11 system, because administrator rights allow users to perform various operations in the system, such as installing software, modifying system settings, etc. Obtaining administrator rights in Win11 system can be achieved through the following methods: The first method is through user account control settings. In the Win11 system, User Account Control is a function used to manage user permissions. Through it, users can adjust their permission levels. To obtain administrator rights, users can enter the "Settings" interface and select "

How to get Phantom Beast Palu Wool How to get Phantom Beast Palu Wool Feb 03, 2024 pm 12:33 PM

There are various props and materials in the fantasy beast handkerchief, among which wool is an important resource. Wool can be used to make various props, but some players may not know how to obtain wool. Below I will introduce you to some methods of obtaining wool, I hope it will be helpful to you. How to obtain the wool of the fantasy beast Palu 1. The wool dropped by the palu can be obtained from a variety of palu, including Mian Youyou, Milufi, Melupa, Mao Shan'er, Mao Daddy, King Melupa and Ice Emperor. Melupa and seven other pallu. When fighting them, watch out for wool drops. 2. In addition to obtaining pasture production through combat, players can also easily produce wool in the pasture. The job adaptability in the game includes grazing pallu, such as Mianyouyou and Melupa. Wool can be harvested by grazing in the pasture.

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

See all articles