Get all checkbox values in javascript

How to get all checked checkbox values using JavaScript

Retrieving the values from a collection of checkboxes is not as straightforward as you would expect. In this article, I will show you one way you can accomplish this.

Let’s say you have the HTML below and you want to retrieve the values of the checkboxes a user has selected.

div class="filter"> Filter by quarter: ul> li> input type="checkbox" value="1" name="q1" id="q1" /> label for="q1">Q1label> li> li> input type="checkbox" value="2" name="q2" id="q2" /> label for="q2">Q2label> li> li> input type="checkbox" value="3" name="q3" id="q3" /> label for="q3">Q3label> li> li> input type="checkbox" value="4" name="q4" id="q4" /> label for="q4">Q4label> li> ul> div>

We can use querySelectorAll and look for input elements with the type checkbox to get all checkboxes but we only want the checkboxes a user has selected. We can get the selected checkboxes by using the :checked pseudo class.

document.querySelectorAll('input[type="checkbox"]:checked')

Since querySelectorAll returns an HTMLCollection will need to convert it to an array and map over that array to get the value of the checked checkboxes.

We will use event delegation to listen for checkbox changes. Event delegation enables us to add the event listener to a parent element (the ul ) instead of each child element ( input[type=»checkbox»] ). For more information on event delegation, I highly recommend David Walsh’s blog post “How JavaScript Event Delegation Works”

const ul = document.querySelector('ul') let selected = []; ul.addEventListener('change', event =>  if (event.target.type === 'checkbox')   const checked = document.querySelectorAll('input[type="checkbox"]:checked') selected = Array.from(checked).map(x => x.value) > >)

Any time a checkbox is clicked, the selected array will be updated. If we select the first and last checkbox selected will contain [«1», «4»] .

Joshua Colvin is a UI Software Engineer specializing in building component libraries. He lives with his wife and two kids in Michigan.

Источник

How To Get All Checked Checkbox Value In Javascript

In this article, you will learn how to get all checked checkbox value in Javascript. We will cover all use cases of checkboxes and get their data in Javascript.

Checkboxes are boxes that are used to select or deselect an option. They are generally used in forms, such as checkboxes in a form to select a single option or multiple options.

They are different from radio buttons in which only one option can be selected at a time. Checkboxes can be used to select multiple options.

Checkbox is an input element with type=»checkbox» . They have a name attribute that is used to group multiple checkboxes for one purpose and a value attribute that is used to store the value of the checkbox.

You can use the name property to select all checkboxes of the same group.

Selecting All Checkboxes In A Group

To select all checkboxes of a group you can use their name attribute.

To select an element by element’s name attribute you can use document.getElementsByName() method. It returns an array of elements with the specified name attribute.

In the example below, we are selecting all checkboxes of a group with a single click of a button and storing their values in an array.

Choose Language you can work with:
 HTML 
 CSS 
 Milk (food) 
 JavaScript 
 PHP 
 Python 
 Vegetable (food) 
 Ruby 
Select All  

You can see in the output below only checkboxes that belong to the group language are selected.

Choose Language you can work with:

HTML
CSS
Milk (food)
JavaScript
PHP
Python
Vegetable (food)
Ruby
Select All

Another way to select checkboxes of a group is by using the querySelectorAll() method. It returns a NodeList of elements with the specified name attribute.

To select checkboxes of group language you can apply document.querySelectorAll(‘input[name=»language»]’) .

// selecting all checkboxes // of group language using querySelectorAll() var checkboxes = document.querySelectorAll('input[name="language"]'); var values = []; // looping through all checkboxes for (var i = 0; i < checkboxes.length; i++) < checkboxes[i].checked = true; values.push(checkboxes[i].value); >alert(values);

Selecting Checked Checkboxes Of A Group

When the user has given their choice in the checkboxes then you need to get those data and perform some action on it.

To get all checked checkboxes values in Javascript you can follow 2 ways:

1. Selecting using the checked property of checkbox.
2. Selecting using CSS selector :checked .

1. Selecting using the checked property of the checkbox

To select all checked checkboxes of a group first select all checkboxes of a group and then loop through all checkboxes and get their checked property value.

If the return value is true then the checkbox is checked. You can store it in an array for further use.

// selecting all checkboxes // of group language using querySelectorAll() var checkboxes = document.querySelectorAll('input[name="language"]'); var values = []; // looping through all checkboxes // if checked property is true then push for (var i = 0; i < checkboxes.length; i++) < if (checkboxes[i].checked == true) < values.push(checkboxes[i].value); >> alert(values);

Choose the language you can work with and click the button to get selected boxes.

HTML
CSS
JavaScript
PHP
Python
Ruby
Get Selected Options

2. Selecting using CSS selector :checked

There is another way to select all checked checkboxes of a group. It is by using a CSS selector.

:checked is a pseudo CSS selector which can select the checkbox which is checked.

Use this with the querySelectorAll() method to select all checkboxes of a group.

// selecting all checkboxes // of group language using :checked pseudo selector var checkboxes = document.querySelectorAll('input[name="language"]:checked'); // get values of all checked checkboxes var values = [. checkboxes].map(checkbox => checkbox.value); alert(values);

Choose Language you can work with then click button.

HTML
CSS
JavaScript
PHP
Python
Ruby
Get Selected Options

Select All Checkboxes Of Entire Document

There will be a similar approach to select all checkboxes of the entire document. Here instead of targeting a group of checkboxes, we will target all checkboxes of the entire document.

While using the querySelectorAll() method we can target all checkboxes of the entire document by using selector input:checked .

// selecting all checkboxes // of entire document using querySelectorAll() var checkboxes = document.querySelectorAll('input:checked'); // get values of all checked checkboxes var values = [. checkboxes].map(checkbox => checkbox.value); alert(values);

If there is any checkbox in this document checked then it will be shown.

HTML
Milk
Chips
Shampoo
CSS
Bread
Candy
Get Selected Options

Conclusions

In this short guide, we have seen how to select all checked checkboxes value in JavaScript with different case scenarios. Like selecting all checkboxes of a group, selecting all checked checkboxes of a group, selecting all checked checkboxes of the entire document, etc.

Источник

Get all checkbox values in javascript

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Источник

How to get all checked checkbox values in JavaScript?

To get all checked checkboxes in JavaScript, do this: document.querySelectorAll(‘input[name=fieldName]:checked’) .

So if you have your checkboxes like this:

type="checkbox" name="myCheckboxes" id="treeCheckbox" value="tree">for="treeCheckbox">Tree type="checkbox" name="myCheckboxes" id="dogCheckbox" value="dog">for="dogCheckbox">Dog type="checkbox" name="myCheckboxes" id="catCheckbox" value="cat">for="catCheckbox">Cat 

And you check Dog and Cat .

Then you can use this JavaScript to get all checked checkboxes and their values:

const allChecked = document.querySelectorAll('input[name=myCheckboxes]:checked'); // NodeList(2) [input#dogCheckbox, input#catCheckbox] console.log(allChecked); // [ 'dog', 'cat' ] console.log(Array.from(allChecked).map(checkbox => checkbox.value)); 

Could these interest you as well? 🤔

Источник