How To Get Multiple Checkbox Value In Javascript

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

In this article, we will see how to get multiple checkbox values in javascript. Here, we will learn to get the selected checkbox values using jquery. We will use the :checked selector for checkboxes and radio buttons. It can retrieve the selected value of the checkbox. When clicking on the checkbox we will push the value in the array using the push() function.

So, let's see get selected checkbox values in jquery, multiple checkbox checked values in javascript, get checkbox value in javascript, and get checkbox value in the javascript array.

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