How To Get Multiple Checkbox Value In Javascript

    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

    You might also like :

Bình luận
Vui lòng đăng nhập để bình luận
Một số bài viết liên quan