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 Fix cURL Error 60 SSL Certificate Problem
How To Fix cURL Error 60 SSL C...

In this example we see how to fix cURL error 60 SSL certificate problem. cURL error 60: SSL certificate proble...

Read More

Dec-08-2021

How To Count Days Excluding Weekends And Holidays In Laravel 9
How To Count Days Excluding We...

In this article, we will see how to count days excluding weekends and holidays in laravel 9. Here, we will learn to...

Read More

Jan-24-2023

How To Add Toastr Notification In Laravel 10
How To Add Toastr Notification...

In this article, we will see how to add toastr notification in laravel 10. Here, we will learn about toastr notification...

Read More

Mar-06-2023

Laravel 9 whereDay / whereYear / whereTime Example
Laravel 9 whereDay / whereYear...

In this article, we will see the laravel 9 whereDay / whereYear / whereTime query example. The whereDay&n...

Read More

Oct-20-2022