How To Get Multiple Checkbox Value In Javascript

Websolutionstuff | Jan-10-2023 | Categories : Laravel PHP jQuery

Checkboxes let us make multiple choices. But how do you actually use them in JavaScript? It might seem tricky, especially if you're new to web development.

Well, don't worry, because we're going to make it all crystal clear. We'll show you, step by step, how to get values from multiple checkboxes. Whether you're building a to-do list app or making a filter for your online store, our blog will break it down in simple terms.

So, let's get ready to understand checkboxes and boost your web development skills!

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Multiple Checkbox Value In Javascript - Websolutionstuff</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<style>
  body{
  	margin:100px;
  }
</style>
<body>
  <h3>Get Multiple Checkbox Value In Javascript - Websolutionstuff</h3>
    <form>
        <h3>Select languages:</h3>
        <label><input type="checkbox" value="laravel" name="language"> Laravel </label>
        <label><input type="checkbox" value="php" name="language"> PHP </label>
      <label><input type="checkbox" value="javascript" name="language"> JavaScript </label>
        <label><input type="checkbox" value="jquery" name="language"> jQuery </label>
        <label><input type="checkbox" value="mysql" name="language"> MySQL </label>
        <label><input type="checkbox" value="css" name="language"> CSS </label>
        <label><input type="checkbox" value="python" name="language"> Python </label>
        <br><br>
        <button type="button">Get Selected Values</button><br>
      	<p></p>
    </form>
  <script>
      $(document).ready(function() {
          $("button").click(function(){
              var arr = [];
              $.each($("input[name='language']:checked"), function(){
                  arr.push($(this).val());
              });              
            $("p").text("Your selected languages are: " + arr.join(", "));
          });
      });
  </script>
</body>
</html>

Output:

how_to_get_multiple_checkbox_value_using_javascript

 

Conclusion

Fetching multiple checkbox values in JavaScript is a valuable skill for creating interactive forms. With the steps explained in this blog, you've gained the ability to build forms that allow users to make several selections effortlessly.

Keep experimenting and practicing to expand your JavaScript skills. As you get more comfortable, you'll be able to create user-friendly and dynamic web applications. Embrace the learning journey and enjoy crafting impressive, user-centric web experiences.
 


You might also like :

Recommended Post
Featured Post
How To Install Angular In Ubuntu
How To Install Angular In Ubun...

In this article, we will see how to install angular in ubuntu. Angular is a framework, library, assets, a...

Read More

May-09-2022

Fixed: Class "DOMDocument" Not Found In Laravel
Fixed: Class "DOMDocument" Not...

In this article, we will see to fixed class "DOMDocument" not found in laravel. Also, class 'domdocum...

Read More

Feb-17-2023

Bootstrap Modal In Angular 13
Bootstrap Modal In Angular 13

In this article, we will see the bootstrap modal in angular 13. Ng Bootstrap is developed from bootstrap and they p...

Read More

Jun-10-2022

How To Get Selected Checkbox List Value In Jquery
How To Get Selected Checkbox L...

In this tutorial, I will explain you to how to get the selected checkbox value from a checkbox list in jquery, If y...

Read More

Jun-17-2020